>[success] # watch -- 侦听器 1. `watch`可以 在每次响应式属性发生变化时触发一个函数，因此当希望在代码逻辑中监听**某个数据的变化**，这个时候就需要用侦听器`watch`来完成了 2. `watch `类型`{ [key: string]: string | Function | Object | Array}` ~~~ const app = createApp({ data() { return { a: 1, b: 2, c: { d: 4 }, e: 5, f: 6 } }, watch: { // 侦听顶级 property a(val, oldVal) { console.log(`new: ${val}, old: ${oldVal}`) }, // 字符串方法名 b: 'someMethod', // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 c: { handler(val, oldVal) { console.log('c changed') }, deep: true }, // 侦听单个嵌套 property 'c.d': function (val, oldVal) { // do something }, // 该回调将会在侦听开始之后被立即调用 e: { handler(val, oldVal) { console.log('e changed') }, immediate: true }, // 你可以传入回调数组，它们会被逐一调用 f: [ 'handle1', function handle2(val, oldVal) { console.log('handle2 triggered') }, { handler: function handle3(val, oldVal) { console.log('handle3 triggered') } /* ... */ } ] }, methods: { someMethod() { console.log('b changed') }, handle1() { console.log('handle 1 triggered') } } }) const vm = app.mount('#app') vm.a = 3 // => new: 3, old: 1 ~~~ >[danger] ##### watch 其他监听形式 -- $watch ~~~ // 1.创建app const app = Vue.createApp({ // data: option api data() { return { message: "Hello Vue" } }, methods: { changeMessage() { this.message = "你好" } }, // 生命周期回调函数: 当前的组件被创建时自动执行 // 一般在该函数中, 会进行网络请求 created() { // ajax/fetch/axios console.log("created") this.$watch("message", (newValue, oldValue) => { console.log("message数据变化:", newValue, oldValue) }, { deep: true }) } }) // 2.挂载app app.mount("#app") ~~~ 3. 在3.x 中 `watch `还增加了`flush` `onTrack` `onTrigger`，三个配置 * `flush ： 'pre' | 'post' | 'sync' `默认是`pre`，`pre` 会在 Vue 组件更新**之前**被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态,`post`,在侦听器回调中能访问被 Vue 更新**之后**的 DOM,`sync` 是每一步都会触发(实际vue 为了防止使用队列缓冲回调。回调只会添加到队列中一次，即使所监视的值更改了多次。中间值将被跳过，并且不会传递给回调，但`sync`是次次触发) ，具体可[查看的案例参考](https://github.com/vuejs/core/issues/5721) * `onTrack` `onTrigger` -- 备注 用来做调试用的 4. 如果想停止监听使用`unwatch()` >[danger] ##### 注意监听对象 1. 为了监听对象内部值的变化，可以在选项参数中指定 `deep: true`。这个选项同样适用于**监听数组变更**。注意：**当变更（不是替换）对象或数组并使用 deep 选项时，旧值将与新值相同，因为它们的引用指向同一个对象/数组**。Vue 不会保留变更之前值的副本。简单的说监听一个对象新老值打印是一样的结果，**因此如果你想保留新老的变化并且知道具体深入值建议采用类似上面案例中`c.d`具体属性监听** 2. 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能 4. 声明侦听器回调时避免使用箭头函数，因为它们将无法通过 `this `访问组件实例 >[info] ## 官方地址 [官网watch参考](https://v3.cn.vuejs.org/api/options-data.html#watch)