[Vue3] - 5 watch与watchEffect用法

前言

目标

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

---

graph LR
A[监听] --> B[watch用法]
B --> E[监听ref定义的的响应式数据]
B --> C[监听reactive定义的响应式数据]
A --> D[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)
})

监听多个响应式对象

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

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

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

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

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

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

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

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

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

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

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

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

3 watch监听的是什么

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

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

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

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

二 watchEffect用法

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

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

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

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

---

总结

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