Vue3的watch属性

watch属性

​ 与计算属性相同的是，watch也可以使用vue2的老写法，但不推荐这么做

watch监视ref所定义的一个或多个响应式数据

​ watch(监视的数据,(newvalue，oldvalue)=>{},监视配置)

• watch函数里面可以写三个参数，分别是监视的数据，回调函数，监视属性的配置
• 监视属性可以传递多个，每次更改属性时newvalue和oldvalue都是一个数组，只有监视的对象发生改变的对应的数组的数据才会变化
• 我们的第三个参数，用于监视配置，比如{immediate:true}

watch 监视reactive定义的响应式数据

​ watch(监视的数据,(newvalue，oldvalue)=>{},监视配置)

• watch在监视reactive定义的响应式数据时，newvalue和oldvalue是一个值，会出现oldvalue丢失的问题
• watch在监视reactive定义的响应式数据时，强制开启深度监视
• 监视reactive的对象的某个属性时，监视的数据要写成函数形式，oldvalue不会出现问题
• 监视reactive的对象的某些属性时，监视的数据要写成函数形式，oldvalue不会出现问题
  

小总结

• watch监视对象为某个值

  • watch监视的目标是一个普通的值，比如ref定义的非对象类型的数据，watch配置项（监视的数据，回调函数，监视配置），回调函数的oldvalue可以正常使用

  • watch监视的目标为对象的某个值，比如reactive定义的对象的某个属性xxx，watch配置项（监视的数据，回调函数，监视配置），监视的数据要写成函数形式，（）=>对象.xxx，回调函数的oldvalue可以正常使用

  • watch(()=>person.name,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值",newvalue,oldvalue);})
    

• watch监视对象为多个值

  • watch监视的目标为多个普通的值，要写成数组的形式，回调函数的value也会是数组形式，oldvalue可以正常使用

  • watch监视的目标为对象的多个值，要写成数组的形式，同时每个数据也要写成函数形式，oldvalue可以正常使用

  • watch([()=>person.name,()=>person.address],(newvalue,oldvalue)=>{console.log("这是对象的某些属性的值",newvalue,oldvalue);})
    

• watch监视对象为对象

  • watch监视的目标为reactive定义的响应式对象，newvalue和oldvalue是一个值，会出现oldvalue丢失的问题，而且强制开启深度监视

  • watch监视的目标为ref定义的响应式对象，要使用对象.value或者配置深度监视才能监测的到，oldvalue也会丢失

  • watch监视的目标为对象的属性（此属性也是个对象），此时也会出现oldvalue丢失的问题，但 是 ！ 要开启深度监视才能监测的到该属性 ！

  • watch(person,(newvalue,oldvalue)=>{console.log("这是对象",newvalue,oldvalue);})
    watch(()=>person.job,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值也是个对象并且开启了深度监视",newvalue,oldvalue);},{deep:true})
    

• <template>
    <div class="hello">
      <h1>姓名：<input type="text" v-model="person.name"></h1>
      <h1>地址：<input type="text" v-model="person.address"></h1>
      <h1>{{person.message}}</h1>
      <button @click="person.name+=`~`">姓名按钮</button>
      <button @click="person.address+=`$`">地址按钮</button>
      <button @click="person.job.j1.salary++">加工资</button>
    </div>
  </template>
  
  <script>
  import { reactive } from '@vue/reactivity'
  import { watch } from '@vue/runtime-core'
  export default {
    name: 'HelloWorld',
    setup() {
      let person=reactive({
        name:"魈" ,address:"璃月",job:{j1:{salary:2000}}
      }) 
      watch(()=>person.name,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值",newvalue,oldvalue);})
      watch([()=>person.name,()=>person.address],(newvalue,oldvalue)=>{console.log("这是对象的某些属性的值",newvalue,oldvalue);})
      watch(person,(newvalue,oldvalue)=>{console.log("这是对象",newvalue,oldvalue);})
      watch(()=>person.job,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值也是个对象并且开启了深度监视",newvalue,oldvalue);},{deep:true})
      return {person}
    }
   
  }
  </script>
  
  

watchEffect函数

• watchEffect函数会自动配置immediate属性，即自动调用一次
• watchEffect函数不用说明监视哪个属性，回调中用到那个属性，属性发生变化了会自动调用watchEffect函数回调函数

watchEffect(()=>{
      const a=person.name 
      console.log("watchEffect被调用了",a);
    })

• 第一次发，有些图片传不上去，自己写的笔记，可能比较简陋