watch

使用方式

watch有第三个配置项参数，其中深度监听对象在这里配置，

{
    deep: true, // 是否深度监听
    immediate: false, // 是否先调用一次watch监听
}

注意：

1. watch对reactive对象时，默认开启深度监听，但是监听时拿到新值和旧值是一样的（bug）
2. watch监听ref对象时，需要手动开启深度监听，监听时拿到的新值和旧值也是一样的（bug）
3. watch对reactive对象的某个属性监听时，这个属性的值是简单类型时，watch的第一个参数这样写：() => reactiveVal.name；这个属性的值是引用类型时，参数这样写：reactiveVal.info
4. watch监听ref.value时，等同于监听reactive对象（ref传值对象时，用reactive处理），此时默认开启深度监听

// 监听ref、reactive对象
const refVal = ref()
const reactiveVal = reactive({name: '张三', info: { age: 18 }})
watch(refVal, (oldVal, newVal) => {})
watch([refVal, reactiveVal], () => {})
// 监听ref、reactive对象对应的值和属性
watch(() => refVal.value, () => {})
watch(() => [refVal.value, reactiveVal.name], () => {})

watchEffect

监听的副作用，主要是值发生改变时出现的其他操作，所以不确定具体哪些值会改变，只要函数中出现的值发生了改变，函数就会触发。

import { watchEffect } from 'vue'
const stop = watchEffect((onInvalidate) => {
    // 立即执行一次，之后数据发生变化后执行
    onInvalidate(() => {
        // 清除副作用
    })
})

注意：

1. 进入页面，watchEffect传入的函数会立刻执行一次，此时onInvalidate函数不会执行
2. 值发生改变后，onInvalidate传入的参数（函数）与watchEffect依次执行，主要用来清除一些副作用
3. stop函数用来清除监听

配置项

配置项在第二个参数

{
    flush: pre, // 默认，dom更新前触发函数，post，dom更新后触发函数，sync，很少用，强制效果同步触发
    // 只在开发模式生效，用来调试
    onTrack() {},
    onTrigger() { debugger },
}