En el cuarto capítulo de las vacaciones, siento que todavía soy muy débil en los puntos de conocimientos básicos.
Aprovechando el feriado revísalo nuevamente
1. toRef y toRefs
Cree un objeto de referencia cuyo valor apunte a un atributo en otro objeto.
Sintaxis: const nombre = toRef(persona,'nombre')
Aplicación: Para proporcionar un atributo en un objeto responsivo para uso externo por separado
: Extensión: toRefs tiene la misma función que toRef, pero puede crear múltiples objetos de referencia en lotes. Sintaxis: toRefs(persona)
Ejemplo: Al definir penson como un objeto responsivo, defina una variable para recibir un cierto valor en el objeto,
const nombre1 = persona.nombre De esta manera nombre1 no tiene capacidad de respuesta
const nombre2 = toRef(persona,'nombre') De esta manera nombre2 tiene capacidad de respuesta
<template>
<div>
<h2>姓名：{
{
person.name }}</h2>
<h2>性别：{
{
person.sex }}</h2>
<h2>工作：{
{
person.job.job1.work }}</h2>
<button @click="person.name += '~'">姓名变了</button>
<br />
<button @click="person.sex += '！'">性别变了</button>
<br />
<button @click="person.job.job1.work += '还有其他工作'">工作变了</button>
</div>
</template>
<script >
import {
ref, reactive,toRef } from "vue";
export default {
name: "demo",
setup() {
let person = reactive({
name: "莲花",
sex: "男",
job: {
job1: {
work: "侦探",
},
},
});
const name1 = person.name;
console.log(name1, "name1");
const name2 = toRef(person,'name')
console.log(name2, "name2");
return {
person,
};
},
};
</script>
<style scoped></style>
Si el área de la plantilla quiere simplificarse así
<template>
<div>
<h2>姓名：{
{
name }}</h2>
<h2>性别：{
{
sex }}</h2>
<h2>工作：{
{
work }}</h2>
<button @click="name += '~'">姓名变了</button>
<br />
<button @click="sex += '！'">性别变了</button>
<br />
<button @click="work += '还有其他工作'">工作变了</button>
</div>
</template>
<script >
Necesitas usar toRef
<script >
import {
ref, reactive, toRef } from "vue";
export default {
name: "demo",
setup() {
let person = reactive({
name: "莲花",
sex: "男",
job: {
job1: {
work: "侦探",
},
},
});
const name1 = person.name;
console.log(name1, "name1");
const name2 = toRef(person, "name");
console.log(name2, "name2");
return {
//toRef接收的第一个参数是对象，第二个是属性键
name: toRef(person, "name"),
sex: toRef(person, "sex"),
work: toRef(person.job.job1, "work"),
};
},
};
</script>
Parece que usar ref directamente puede lograr efectos similares, pero ¿se puede reemplazar escribiendo ref? La respuesta es no.
Si reemplaza el método de escritura con ref, los atributos definidos en persona solo se leerán durante la inicialización, y luego los atributos en persona se modificarán. Lo que se cambia no son los atributos definidos en persona en absoluto, sino los atributos recién definidos a cambio. Atributos del paquete ref.
Muestre el objeto persona en el área de la plantilla, luego haga clic en los tres botones para ver los resultados impresos.
Haga clic en los tres botones a voluntad. La página ha cambiado, pero el objeto persona sigue siendo el original. Si
lo reemplaza
con toRef, la persona El objeto también cambiará.
toRef solo puede procesar un atributo a la vez, mientras que toRefs puede procesar por lotes todos los atributos en un objeto
... El operador de expansión solo puede llegar al primer nivel, por lo que para trabajar en el área de plantilla, comience desde el trabajo y haga clic hacia abajo, trabajo .trabajo1.trabajo
La esencia de toRef es una referencia, que mantiene la relación de conexión con el objeto fuente, mantiene la llamada y realiza un puente. La
referencia creada por toRef es una referencia a las propiedades del objeto existente. Por lo tanto, cuando modifica la referencia devuelta por toRef, las propiedades en el objeto original se modifican directamente.
La esencia de ref es copiar: los atributos del objeto se leen y se empaquetan en una nueva referencia, que ya no está conectada con la original.
ref es adecuado para crear datos reactivos con un valor único mutable, mientras que toRef se usa para obtener una referencia a una propiedad específica en un objeto reactivo existente y prestar atención a los cambios en esa propiedad.