1. 作用

同时监听多个属性

2. 用法

2.1 开启 watchEffect 监听

<template>
    <input type="text" v-model="val.person.name">
    <input type="text" v-model="val.person.age">
</template>
    
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'

let val = reactive({
    person: {
        name: 'lzy',
        age: 18
    }
})

// 只要是写在了回调里的属性，都能被监听到，只要其中任何一个属性改变了，都会触发这个回调
watchEffect(() => {
    console.log('name', val.person.name)
    console.log('age', val.person.age)
})
</script>

2.2 回调触发最初时，需要执行某些操作

可以接收一个 oninvalidate 回调，会在监听触发之后、其它代码执行之前执行

const stop = watchEffect((oninvalidate) => {
    console.log('name', val.person.name)
    console.log('age', val.person.age)
    // 会最先执行下面这个函数中的回调
    oninvalidate(() => {
        console.log("before")
    })
})

2.3 停止 watchEffect 监听

<template>
    <input type="text" v-model="val.person.name">
    <input type="text" v-model="val.person.age">
    <hr>
    <button @click="stopWatch">停止监听</button>
</template>
    
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'

let val = reactive({
    person: {
        name: 'lzy',
        age: 18
    }
})

// 返回的是一个函数，当这个函数调用时，就会停止监听
const stop = watchEffect((oninvalidate) => {
    console.log('name', val.person.name)
    console.log('age', val.person.age)
    // 会最先执行下面这个函数中的回调
    oninvalidate(() => {
        console.log("before")
    })
})

const stopWatch = () => stop()  // 点击触发 stop()，停止监听

</script>

2.4 第二个参数的一些配置项

flush:
    pre - 组件更新之前触发
    sync - 同步触发
    post - 组件更新之后触发

<template>
    <input type="text" id="ipt">
</template>
    
<script setup lang="ts">
import {  watchEffect } from 'vue'

watchEffect(() => {
    let ipt = document.querySelector("#ipt")
    console.log(ipt)
}, {
    // flush: 'pre'  // 组件更新之前，ipt 值为 null
    // flush: 'sync'  // 同步触发，ipt 值为 null
    // flush: 'post'  // 组件更新之后，ipt 值为 真实 DOM 元素
})
</script>