[vue3] monitoreo de wacth, datos de monitoreo definidos por referencia, datos de monitoreo definidos por reactiva, explicación detallada de los errores

En la segunda parte de las vacaciones, siento que todavía tengo muy débiles puntos de conocimientos básicos.
Aprovecha las vacaciones para revisarlo de nuevo

He grabado un artículo antes [puntos de conocimiento básico de vue3: calculados y observados]
Hoy, durante el proceso de aprendizaje, descubrí que el artículo que grabé antes es realmente muy básico y muchas cosas no están lo suficientemente detalladas.

Sin más, vayamos al grano:

ver2

Observe el método de escritura en vue2 (vue3 puede ser compatible con versiones anteriores del método de escritura vue2)

<template>
  <div>
    <h1>当前求和为：{
    
    {
    
    sum}}</h1>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script >

import {
    
     ref, watch } from 'vue';
export default {
    
    
name:'demo',
watch: {
    
    
  // vue2简单写法
  sum(newVal, oldVal) {
    
    
    console.log('sum的值变化了', newVal, oldVal);
  }
  //vue2完整写法
  sum:{
    
    
    handler(newVal,oldval){
    
    
    console.log('sum的值变化了', newVal, oldVal);
    },
    deep:true,
    immediate:true
  }
},
setup(){
    
    
  let sum = ref(0)
  return {
    
    
    sum
  }
}
}

</script>

Aunque el método de escritura de vue2 se puede utilizar en vue3, el uso mixto provocará estilos de código inconsistentes y aumentará los costos de mantenimiento. Y estamos acostumbrados al método de escritura de vue2. Todos usamos el método de escritura de vue3. De hecho, es un proceso familiar. La sintaxis <script setup> y la API de composición de vue3 siguen siendo muy populares. Tómate tu tiempo.

La API combinada es en realidad un conjunto de funciones integradas. Si necesita usarla, puede introducir las funciones correspondientes, como ref, wacth, etc.

ver 3

1. Escuche un único dato responsivo definido por referencia

<template>
  <div>
    <h1>当前求和为：{
    
    {
    
    sum}}</h1>
    <button @click="sum++">点我+1</button>
  </div>
</template>
<script >
import {
    
     ref, watch } from 'vue';
export default {
    
    
name:'demo',
setup(){
    
    
  let sum = ref(0)
  //第一个参数，要监听的数据
  //第二个参数，回调函数，两种写法：箭头函数或者普通函数都可以
  //（在vue3中，wathc的回调函数可以写成箭头函数，因为setup中this是undefined，没有响应式的this上下文）

  //箭头函数写法
  watch(sum,(newVal,oldval)=>{
    
    
    console.log('sum变了',newVal,oldval)
    unde
  })
  // 普通函数写法
    watch(sum,function(newVal,oldval){
    
    
    console.log('sum变了',newVal,oldval)
  })
  return {
    
    
    sum
  }
}

}

2. Monitorear múltiples datos de respuesta definidos por referencia

<template>
  <div>
    <h1>当前求和为：{
    
    {
    
    sum}}</h1>
    <button @click="sum++">点我+1</button>
    <h2>当前招呼语：{
    
    {
    
    msg}}</h2>
    <button @click="msg+='wow'">点我打招呼</button>
  </div>
</template>
<script >
import {
    
     ref, watch } from 'vue';
export default {
    
    
name:'demo',
setup(){
    
    
  let sum = ref(0)
  let msg = ref('hello')
//vue2中watch是配置项，只能写一个；vue3中watch是函数，可以调用n次
watch(sum,(newVal,oldVal)=>{
    
    
  console.log('sum变了',newVal,oldVal);
})
watch(msg,(newVal,oldVal)=>{
    
    
  console.log('msg',newVal,oldVal);
})
  return {
    
    
    sum,
    msg
  }
}
}
</script>

Aunque esta forma de escribir puede llamar a la función de vigilancia varias veces, existe una forma más simplificada de escribirla.

<template>
  <div>
    <h1>当前求和为：{
    
    {
    
     sum }}</h1>
    <button @click="sum++">点我+1</button>
    <h2>当前招呼语：{
    
    {
    
     msg }}</h2>
    <button @click="msg += 'wow'">点我打招呼</button>
  </div>
</template>
<script >
import {
    
     ref, watch } from "vue";
export default {
    
    
  name: "demo",
  setup() {
    
    
    let sum = ref(0);
    let msg = ref("hello");
//第一个参数为数组，第二个参数为回调函数
    watch([sum, msg], (newVal, oldVal) => {
    
    
      console.log("sum或msg变了", newVal, oldVal);
    });
    return {
    
    
      sum,
      msg,
    };
  },
};
</script>

Parámetros en vue3 watch, el tercero es el elemento de configuración

Nota: No es necesario escribir deep: true para monitorear los datos definidos por ref. Los tipos de datos simples no requieren un monitoreo profundo. El objeto definido por ref esencialmente llama a reactivo para empaquetarlo en un objeto responsivo, por lo que el objeto definido por ref está habilitado de forma predeterminada.Monitoreo profundo

watch(fuente: WatchSource, cb: WatchCallback, opciones?: WatchOptions): StopHandle
fuente: la fuente de monitoreo (pueden ser datos de respuesta, propiedades calculadas o referencia, etc.) cb: las opciones de la función de devolución de llamada
que se llaman cuando la fuente cambia (puede ser
(opcional): un objeto que contiene configuraciones de opciones adicionales.
Devuelve una función para dejar de escuchar.

    let sum = ref(0);
    let msg = ref("hello");
    //监听单个
     watch(sum, (newVal, oldVal) => {
    
    
      console.log("sum变了", newVal, oldVal);
    },{
    
    
      immediate:true
    });
   //监听多个

    watch([sum, msg], (newVal, oldVal) => {
    
    
      console.log("sum或msg变了", newVal, oldVal);
    },{
    
    
      immediate:true
    });

3. Monitorear todos los atributos de un único dato responsivo definido por reactivo

<template>
  <div>
<h2>姓名：{
    
    {
    
    person.name}}</h2>
<h2>性别：{
    
    {
    
    person.sex}}</h2>
<button @click="person.name+='~'">姓名变了</button>

<button  @click="person.sex+='！'">性别变了</button>
  </div>
</template>
<script >
import {
    
    reactive,watch } from "vue";
export default {
    
    
  name: "demo",
  setup() {
    
    
   
    let person = reactive({
    
    
      name:'莲花',
      sex:'男'
      
    })
        watch(person, (newVal, oldVal) => {
    
    
      console.log("person变了", newVal, oldVal);
    });

    return {
    
    
      person
    };
  },
};
</script>

Aquí hay un problema. Los datos de respuesta definidos por recative se entregan para monitorearlos. El oldValue no se puede obtener correctamente aquí. De forma predeterminada, watch solo puede rastrear cambios en los atributos de datos de respuesta, pero no registrará el valor anterior antes. el cambio Si

los datos definidos por reactivo están profundamente anidados, debe habilitar el monitoreo profundo en vue2 para monitorearlos, pero esto no es necesario en vue3.

<template>
  <div>
<h2>姓名：{
    
    {
    
    person.name}}</h2>
<h2>性别：{
    
    {
    
    person.sex}}</h2>
<h2>工作：{
    
    {
    
    person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import {
    
     ref, reactive,watch } from "vue";
export default {
    
    
  name: "demo",
  setup() {
    
    
    let person = reactive({
    
    
      name:'莲花',
      sex:'男',
      job:{
    
    
        job1:{
    
    
          work:'侦探'
        }
      }      
    })
        watch(person, (newVal, oldVal) => {
    
    
      console.log("person变了", newVal, oldVal);
    });
    return {
    
    
  
      person
    };
  },
};
</script>

Los datos definidos por reactivo obligan a activar el monitoreo profundo. Incluso si se escribe deep:false, la configuración no es válida y el monitoreo profundo no se puede desactivar manualmente. 4. Monitorear

un atributo en un único dato de respuesta definido por reactivo

Si lo escribe así, no tendrá ningún efecto.

<template>
  <div>
<h2>姓名：{
    
    {
    
    person.name}}</h2>
<h2>性别：{
    
    {
    
    person.sex}}</h2>
<h2>工作：{
    
    {
    
    person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import {
    
     ref, reactive,watch } from "vue";
export default {
    
    
  name: "demo",
  setup() {
    
       
    let person = reactive({
    
    
      name:'莲花',
      sex:'男',
      job:{
    
    
        job1:{
    
    
          work:'侦探'
        }
      }      
    })
        watch(person.name, (newVal, oldVal) => {
    
    
      console.log("person.name变了", newVal, oldVal);
    });
    return {
    
      
      person
    };
  },
};
</script>

Habrá un mensaje en la consola: No puedes escuchar de esta manera, solo puedes escuchar el valor definido por ref, o el objeto responsivo generado por reactivo, o una matriz, y person.name es solo un atributo en el responsivo. Objeto generado por reactivo.

Luego, escuchar una propiedad en el objeto responsivo generado por reactivo debería escribirse así:

Primero escriba una función. La función tiene un valor de retorno. Cualquiera que quiera monitorear puede devolverlo.

<template>
  <div>
<h2>姓名：{
    
    {
    
    person.name}}</h2>
<h2>性别：{
    
    {
    
    person.sex}}</h2>
<h2>工作：{
    
    {
    
    person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import {
    
     ref, reactive,watch } from "vue";
export default {
    
    
  name: "demo",
  setup() {
    
    
    let person = reactive({
    
    
      name:'莲花',
      sex:'男',
      job:{
    
    
        job1:{
    
    
          work:'侦探'
        }
      }      
    })
    watch(
   () => person.name,
  (newValue, oldValue) => {
    
    
    console.log(`person变了 发生了变化: ${
     
     oldValue} -> ${
     
     newValue}`);
  }
    )
    return {
    
      
      person
    };
  },
};
</script>

5. Monitorear ciertos atributos en un único dato responsivo definido por reactivo

<template>
  <div>
<h2>姓名：{
    
    {
    
    person.name}}</h2>
<h2>性别：{
    
    {
    
    person.sex}}</h2>
<h2>工作：{
    
    {
    
    person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button>
  </div>
</template>
<script >
import {
    
     ref, reactive,watch } from "vue";
export default {
    
    
  name: "demo",
  setup() {
    
    
   
    let person = reactive({
    
    
      name:'莲花',
      sex:'男',
      job:{
    
    
        job1:{
    
    
          work:'侦探'
        }
      }
      
    })
    watch(
    //第一个参数改为数组
    //newValue, oldValue也会变成数组格式
         [ () => person.name,() => person.sex],
         (newValue, oldValue) => {
    
    
         console.log(`person的name或sex变了 `,newValue, oldValue);
       }
    )  
    return {
    
      
      person
    };
  },
};
</script>

6. En casos especiales, supervise el trabajo. El trabajo es un objeto en persona. Si lo escribe directamente así, no podrá monitorearlo. La razón es que el nivel de contenido del cambio es relativamente profundo. Lo que queremos cambiar es el trabajar en trabajo1 en trabajo.

   let person = reactive({
    
    
      name:'莲花',
      sex:'男',
      job:{
    
    
        job1:{
    
    
          work:'侦探'
        }
      }
      
    })
    watch(
          () => person.job,
         (newValue, oldValue) => {
    
    
         console.log(`person的job变了 `,newValue, oldValue);
       }
    )  

En este momento, debe realizar una configuración profunda en el elemento de configuración.

      watch(
          () => person.job,
         (newValue, oldValue) => {
    
    
         console.log(`person的job变了 `,newValue, oldValue);
       },{
    
    deep:true}
    )