¿Habéis oído hablar de la API de composición de Vue3? Es una nueva forma de jugar Vue3, que convierte la función del componente Vue2 anterior en un componente de función. Bueno, lo que quiero compartir contigo hoy es cómo usar la función ref() en la API de composición.
En primer lugar, la función ref () se usa para crear datos receptivos, actúa como si colocara una etiqueta en una variable, para que Vue pueda saber la ubicación de la variable. A continuación, ¡veamos algunos ejemplos!
Primero, echemos un vistazo a cómo crear una variable reactiva usando la función ref() en la API de composición. el código se muestra a continuación:
<template>
<div>
<p>{
{ message }}</p>
<button @click="changeMessage">Change message</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const message = ref('Hello, world!');
function changeMessage() {
message.value = 'Hello, Vue3!';
}
return {
message,
changeMessage,
};
},
};
</script>
En este ejemplo, usamos la función ref() para crear una variable reactiva llamada mensaje y definirla en la función de configuración del componente. Luego, usamos { {mensaje}} en la plantilla para mostrar el valor de esta variable. Cuando se hace clic en el botón, llamamos a la función changeMessage para cambiar el valor del mensaje. Este es el uso básico de la función ref().
A continuación, veamos cómo usar la función ref() en la API de composición para crear una matriz. el código se muestra a continuación:
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
<button @click="addItem">Add item</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const items = ref([
{
id: 1, name: 'Apple' },
{
id: 2, name: 'Banana' },
{
id: 3, name: 'Orange' },
]);
function addItem() {
items.value.push({
id: items.value.length + 1, name: 'Vue3' });
}
return {
items,
addItem,
};
},
};
</script>
En este ejemplo, usamos la función ref() para crear una matriz reactiva llamada elementos y definirla en la función de configuración del componente. Luego, usamos la directiva v-for en la plantilla para iterar sobre esta matriz y mostrar el nombre de cada elemento. Cuando se hace clic en el botón, llamamos a la función addItem para agregar un nuevo elemento a la matriz. Así es como usa la función ref() en la API de composición para crear matrices.
Finalmente, echemos un vistazo a cómo usar la función ref() en la API de composición para crear un objeto. el código se muestra a continuación:
<template>
<div>
<p>{
{ person.name }}</p>
<p>{
{ person.age }}</p>
<button @click="changePerson">Change person</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const person = ref({
name: 'Vue2', age: 2 });
function changePerson() {
person.value.age = 3;
person.value.name = 'Vue3';
}
return {
person,
changePerson,
};
},
};
</script>
Además de los anteriores, existen otros usos, como:
Use la función ref en la función de configuración para crear un objeto reactivo
<template>
<div>
<p>{
{ person.name }}</p>
<p>{
{ person.age }}</p>
<button @click="changePerson">Change person</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const person = ref({
name: 'Vue2', age: 2 });
function changePerson() {
person.value.age = 3;
person.value.name = 'Vue3';
}
return {
person,
changePerson,
};
},
};
</script>
En la función de configuración del componente, use la función ref para crear una variable reactiva, y úsela para inicializar una variable, y luego use esta variable en la plantilla. Este uso le permite usar variables de manera más conveniente sin marcar manualmente la etiqueta de referencia.
<template>
<div>
<p>{
{ message }}</p>
<button @click="changeMessage">Change message</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const message = ref('Hello, world!');
function changeMessage() {
message.value = 'Hello, Vue3!';
}
return {
message,
changeMessage,
};
},
};
</script>
En la función de configuración del componente, use la función ref para crear una variable receptiva y utilícela para inicializar una matriz, y luego use la directiva v-for en la plantilla para recorrer la matriz. Este uso puede hacer que su código sea más conciso y claro.
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
<button @click="addItem">Add item</button>
</div>
</template>
En la API combinada de Vue3, use la función ref() para crear variables, arreglos, objetos, etc., que respondan, lo que se puede hacer en la función de configuración del componente y luego regresar a la plantilla para su uso. El uso de la función ref() puede hacer que las variables, arreglos, objetos, etc. sean más convenientes para usar en componentes, al tiempo que garantiza que respondan.