天天看点

vue3中的watch和watchEffect1、watch2、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。
vue3中的watch和watchEffect1、watch2、watchEffect
  • 监视person=ref({name:"ZHANGSAN",age:19})的时候,如果不想.value,那么监视的是一个RefImpl的结构,我们想要深度检测RefImpl里面的value里面的属性,需要加上深度监视
vue3中的watch和watchEffect1、watch2、watchEffect
 例子: 
vue3中的watch和watchEffect1、watch2、watchEffect

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

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

(将多个值放在数组中,相应的newValue和oldValue也将会是对应的数组)

watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 
           
 例子:
vue3中的watch和watchEffect1、watch2、watchEffect

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
           
 例子:
vue3中的watch和watchEffect1、watch2、watchEffect

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

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

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

  • 监视的数据必须是函数方式返回才行
  • 可以获取到正确的newvalue和oldvalue
语法:
watch(
      () => person.name,
      (newValue, oldValue) => {
        console.log("person的name变化了", newValue, oldValue);
      }
    );
           
例子: 
vue3中的watch和watchEffect1、watch2、watchEffect

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

当想监视多个情况四对应的属性怎么办呢?可以用数组实现
  • 监视的数据必须是函数方式返回才行
  • 可以获取到正确的newvalue和oldvalue
语法:
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})
           
例子: 
vue3中的watch和watchEffect1、watch2、watchEffect

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

  • 监视reactive定义的响应式数据中某个属性时:deep配置有效。  
vue3中的watch和watchEffect1、watch2、watchEffect
 如果想拿到正确的newValue和oldValue怎么办呢,参考情况四,把检测的数据变成一个属性而不是一个对象
vue3中的watch和watchEffect1、watch2、watchEffect

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

继续阅读