[Vue3] - 5 watch与watchEffect用法

前言

目标

1 watch的监听ref与reactive定义的响应式数据
2 watchEffect的用法

---

一 watch用法

引入watch

import { ref,reactive,watch } from ‘vue’

使用wacth

1 监听ref定义的响应式数据

监听一个响应式对象

登录后复制

let count = ref(0)
let sum = computed(()=>{
    return count.value + 1+'-'
})
watch(count,(newValue,oldValue)=>{
     console.log(newValue,oldValue)
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

监听多个响应式对象

登录后复制

let name = ref('张三')
watch([sum,count],(newValue,oldValue)=>{
     console.log(newValue,oldValue)
})

• 1.
• 2.
• 3.
• 4.

监听到数组任何一个改变都会触发watch，并将监听到的数据以数组的形式返回

2 监听reactive定义的响应式数据

监听响应式数据的全部属性

登录后复制

let person = reactive({
    firstName:'张',
    lastName:'三',
    job:{name:'前端工程师'}
});
watch(person,(newValue,oldValue)=>{
            console.log(newValue,oldValue)
},{deep:false})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

接收的参数newValue与oldValue， newValue === oldValue
person下的job对象改变，watch也能监视到，在vue2中只有开启了deep深度监视才会生效
1 无法获取正确的oldValue
2 deep设置无效，强制开启深度监视

监听响应式数据的某一个属性

登录后复制

watch(()=>person.firstName,(newValue,oldValue)=>{
   console.log(newValue,oldValue)
})

• 1.
• 2.
• 3.

监听响应式数据的某些属性

登录后复制

watch(()=>person.firstName,(newValue,oldValue)=>{
   console.log(newValue,oldValue)
})

• 1.
• 2.
• 3.

特殊情况：监听响应式数据下的复杂属性

登录后复制

let person = reactive({
    firstName:'张',
    lastName:'三',
    job:{name:'前端工程师'}
});
watch(person.job,(newValue,oldValue)=>{
     console.log(newValue,oldValue)
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

3 watch监听的是什么

watch不是监听的数据变化吗？那我们直接把.value数据传递过去是不是就可以了，试一下

登录后复制

watch(count.value,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
})

• 1.
• 2.
• 3.

控制台直接报错，说明watch不能直接监听属性值
直接监听count或者person的时却可以，控制台看一下
count经过ref处理之后变成了RefImpl对象，
person经过reactive处理变成了Proxy对象
这两个结构watch都能监听到，说明watch监听的是结构

登录后复制

watch(count,(newValue,oldValue)=>{})
watch(person,(newValue,oldValue)=>{})

• 1.
• 2.

二 watchEffect用法

看一下官方给的解释，通俗说就是 用指明要监视的属性，监视回调中用到哪个属性就监视哪个属性

登录后复制

// 用到的属性只要变化，就会执行
watchEffect(()=>{
    let fullName = person.firstName
    let counts = count.value
    console.log('----------',fullName)
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

watchEffect调用方式：初始化会触发一次，用到的属性改变会触发

watchEffect类似computed

• watchEffect更注重过程且返回值可有可无
• 而computed更注重结果必要要有返回值

---

总结

1. watch监听的是RefImpl或Proxy结构
2. watchEffect监听回调中用到额度属性
3. watch只要监听全部属性oldValue就会失效，且deep设置无效，强制开启深度监视

原创作者: u_16040646 转载于: https://blog.51cto.com/u_16040646/11707315