Primero, primero comprendamos qué es la API de composición. De hecho, Composition API es una forma de organizar el código Vue. Sabemos que en Vue tradicional, el código del componente suele estar compuesto por una enorme,
Entonces, ¿cuáles son los beneficios de la API de composición? Primero, nos permite escribir código más limpio. No es necesario definir un montón de métodos y propiedades calculadas en el componente, sino que puede dividir esta lógica en pequeñas funciones, lo que hace que el código sea más legible y comprensible. En segundo lugar, la API de composición puede ayudarnos a evitar la duplicación de código. Puede extraer alguna lógica común y compartirla entre varios componentes. De esta forma, puede evitar la duplicación de código y mejorar la eficiencia del desarrollo.
A continuación, veamos algunos ejemplos del uso de la API de composición.
El primer ejemplo es una propiedad calculada simple. En Vue tradicional, necesitamos devolver un resultado calculado en una propiedad calculada. En la API de composición, podemos usar una función simple para lograr esta función.
<template>
<div>
<p>姓名：{
{ fullName }}</p>
</div>
</template>
<script>
import {
computed } from 'vue';
export default {
setup() {
const fullName = computed(() => {
const firstName = '张三'; // 假设这是从父组件传递下来的数据
const lastName = '李四'; // 假设这是从父组件传递下来的数据
return `${
firstName} ${
lastName}`;
});
return {
fullName,
};
},
};
</script>
En el ejemplo anterior, definimos una propiedad calculada fullName usando la función calculada. Esta propiedad calculada devuelve una cadena que contiene las dos variables nombre y apellido transmitidas desde el componente principal. Luego, usamos {{ fullName }} en la plantilla para mostrar el resultado de esta propiedad calculada. De esta manera, cada vez que cambie el valor de nombre o apellido, nombre completo se actualizará automáticamente.
El segundo ejemplo es una función de enlace de ciclo de vida simple. En Vue tradicional, necesitamos definir una serie de funciones de enlace del ciclo de vida en un componente. En la API de composición, podemos usar una función simple para lograr esta funcionalidad.
<template>
<div>
<p>计数器：{
{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import {
onMounted } from 'vue';
export default {
setup() {
let count = 0; // 假设这是从父组件传递下来的数据
onMounted(() => {
console.log('组件已挂载');
});
const increment = () => {
count++;
};
return {
count,
increment,
};
},
};
</script>
En el ejemplo anterior, utilizamos la función onMounted para definir una función de enlace de ciclo de vida. Esta función se ejecutará después de montar el componente y generará un mensaje en la consola. Luego usamos un contador y un botón en la plantilla para demostrar la funcionalidad de este componente. Cuando el usuario hace clic en el botón, el valor del contador aumenta. De esta manera, podemos evitar el uso de propiedades calculadas complejas y funciones de enlace de ciclo de vida en la plantilla.
El tercer ejemplo es una operación asincrónica. En Vue tradicional, necesitamos usar async/await o Promise para manejar operaciones asincrónicas. En la API de composición, podemos usar las funciones de referencia y calculadas para lograr esta función.
<template>
<div>
<p>当前时间：{
{ currentTime }}</p>
<button @click="fetchCurrentTime">获取当前时间</button>
</div>
</template>
<script>
import {
ref, computed } from 'vue';
export default {
setup() {
const currentTimeRef = ref(null);
const fetchCurrentTime = () => {
currentTimeRef.value = fetchCurrentTimeFromServer().then(currentTime => {
currentTimeRef.value = currentTime;
});
};
const currentTime = computed(() => {
return currentTimeRef.value;
});
return {
currentTime,
fetchCurrentTime,
};
},
};
</script>
En el ejemplo anterior, usamos la función ref para definir una referencia currentTimeRef para almacenar la hora actual. Luego, definimos una función asincrónica fetchCurrentTimeFromServer para obtener la hora actual del servidor. En la función fetchCurrentTime, llamamos a la función fetchCurrentTimeFromServer y almacenamos el resultado en currentTimeRef. Finalmente, usamos la función calculada para definir una propiedad calculada currentTime para devolver el valor actual currentTimeRef. De esta forma, cada vez que cambie el valor de currentTimeRef, currentTime se actualizará automáticamente. Cuando el usuario hace clic en el botón "Obtener hora actual", llamaremos a la función fetchCurrentTime para obtener la hora actual y actualizar el valor de currentTimeRef. Luego, { { currentTime }} en la plantilla se actualizará automáticamente a la última hora actual.