如何使用

$watch

官方说，侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、props 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。

本质是：我们侦听一个数据，当这个数据变化的时候，我们要去做一些操作。让我们先定义一个实例，如下：

const { createApp, ref, reactive } = Vue
const app = createApp({
    setup() {
        const name = ref('也笑')
        const obj = reactive({
            name: "也笑",
            info: {
                englishName: "slifree"
            }
        })
        return {
            name,
            obj
        }
    },
})
const vm = app.mount("#app")

那么我们可以这样来用它，如下：

侦听基础数据

vm.$watch('name',(newV,oldV)=>{
    console.log(newV,oldV)
})

侦听对象

vm.$watch(
    () => vm.obj.info.englishName,
    (newV, oldV) => {
        console.log(newV, oldV)
    }
)

这里需要注意的是：当侦听对象某一属性的时候，$watch的第一个参数要采用回调函数的形式传参，否则，则不会触发侦听。

侦听传参

vm.$watch('obj', (newV, oldV) => {
    console.log(newV, oldV)
}, {
    deep: true,
    immediate: true,
    flush: 'pre'
})

deep: true：深层侦听
immediate: true：立即以表达式的当前值触发回调
flush：控制回调的时间。它可以设置为 'pre'、'post' 或 'sync'

停止侦听

const unwatch = vm.$watch('name',(newV,oldV)=>{
    console.log(newV,oldV)
})
unwatch()

$watch 返回一个取消侦听函数，用来停止触发回调。

如果想了解它也可以参考回首Vue3之API篇（十）这篇文章。

$emit

触发当前实例上的事件。附加参数都会传给监听器回调。在组件中我们定义事件的时候要配合emits一起使用。

假定我们定义一个组件，如下：

app.component('my-component', {
    emits: ['change'], // 需要注意的地方
    props: ['name'],
    data() {
        return {
            value: ''
        }
    },
    template: `<h1>
            <input type="text" v-model="value">
            <button @click="$emit('change', value)">{{name}}</button> // 需要注意的地方
        </h1>`
})

值得我们注意的是：emits 选项中列出的事件不会从组件的根元素继承，也将从 $attrs property 中移除。

emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象，后者允许配置事件验证。

$forceUpdate

迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件，使用如下：

this.$forceUpdate()

当我们数据过大，render函数没有触发的时候，或者某个时候渲染暂停的时候，我们可以使用这个方法强制的去再次渲染实例。不过这个方法，我们一般用不到。

$nextTick

官方说，将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。使用如下：

methods: {
    // ...
    changeName() {
        // 修改数据
        this.name = '也笑'
        // DOM 尚未更新
        this.$nextTick(function () {
            // DOM 现在更新了
            // `this` 被绑定到当前实例
            this.doSomethingElse()
        })
    }
}

在DOM更新后再做一些操作，我们可以参与一下回首Vue3之API篇（七）这篇文章的 nextTick 用法。

总结

$watch的第一个参数要采用回调函数的形式传参，否则，则不会触发侦听。
根据需求，我们要给$watch合理的去传参。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之实例篇（三）

如何使用

$watch

$emit

$forceUpdate

$nextTick

总结