>[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)