vue3中的watch和watchEffect

1、watch

两个小“坑”：

• 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。参考情况三和情况六
• 监视reactive定义的响应式数据中某个属性时：deep配置有效。参考情况六

1、情况一：监视ref定义的响应式数据

 监视ref定义的响应式数据语法：

watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true}) 
           

• 这个地方let sum=ref(0)，监视的时候不需要写sum.value，因为监视的是真正保存数据RefImpl的结构，不是具体的值，所以这里不需要【.value】
• 监视person=ref({name:"ZHANGSAN"，age:19})的时候，需要.value，因为person是拿ref定义的，我们是想监视的是person里面的RefImpld的.value的proxy，所以person需要.value，这样监测的就不再是ref所定义的数据了，而是ref里借助reactive定义的Proxy数据，相当于下面的情况3-6。

• 监视person=ref({name:"ZHANGSAN"，age:19})的时候，如果不想.value，那么监视的是一个RefImpl的结构，我们想要深度检测RefImpl里面的value里面的属性，需要加上深度监视

 例子： 

 2、情况二：监视ref所定义的多个响应式数据

 监视多个ref定义的响应式数据语法：

（将多个值放在数组中，相应的newValue和oldValue也将会是对应的数组）

watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 
           

 例子：

3、情况三：监视reactive定义的响应式数据

• 监视reactive定义的响应式数据时：oldValue无法正确获取、
• 监视reactive定义的响应式数据时，强制开启了深度监视（deep配置失效）。

监视reactive定义的响应式数据语法：

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效，所以不要写deep:false
           

 例子：

4、情况四：监视reactive定义的响应式数据中的某个属性

因为情况三中，watch无法监视reactive定义的proxy对象，那些不是对象类型的可以吗？可以

当监视reactive定义的响应式数据中的是某个属性时：

• 监视的数据必须是函数方式返回才行
• 可以获取到正确的newvalue和oldvalue

语法：

watch(
      () => person.name,
      (newValue, oldValue) => {
        console.log("person的name变化了", newValue, oldValue);
      }
    );
           

例子： 

5、情况五：监视reactive定义的响应式数据中的某些属性

当想监视多个情况四对应的属性怎么办呢？可以用数组实现

• 监视的数据必须是函数方式返回才行
• 可以获取到正确的newvalue和oldvalue

语法：

watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})
           

例子： 

 6、情况六：监视reactive定义的响应式数据中的某些对象

• 监视reactive定义的响应式数据中某个属性时：deep配置有效。  

 如果想拿到正确的newValue和oldValue怎么办呢，参考情况四，把检测的数据变成一个属性而不是一个对象

2、watchEffect

 需要引入：

import { watchEffect } from 'vue'      

• watch的套路是：既要指明监视的属性，也要指明监视的回调。
• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
• watchEffect有点像computed：
  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})
           

参考视频：

尚硅谷Vue2.0+Vue3.0全套教程，全网最新最强vuejs从入门到精通_哔哩哔哩_bilibili