Vue 3 遷移政策筆記—— 第29節：數組的監聽

前言

本筆記主要基于官方文檔《遷移政策——Watch on Arrays》彙總而來。如有了解出入，請以官方文檔為主。建議您以官方文檔為主，本文為輔。這樣您可以“以自己為主”審視的閱讀，進而不被我的觀點帶偏。

知識儲備：

《Vue api —— vm.$watch》

概述

當偵聽一個數組時，隻有當數組被替換時才會觸發回調。如果你需要在數組改變時觸發回調，必須指定

deep

選項。

Vue 3.x 用法展示

在 Vue 3.x 當我們監聽一個數組時，隻有在數組被整體替換時才會觸發回調。也就是說，如果我們隻對數組進行增删改查操作時，是不會被 Vue 捕捉到的。如果想要在數組在發生改變時被 Vue 識别到，我們必須手動添加

deep

選項。如下:

watch: {
  bookList: {
    handler(val, oldVal) {
      console.log('book list changed')
    },
    deep: true
  },
}
           

Vue 2.x 的watch

其實，watch 的

deep

選項在 Vue 2.x 就有了。不過，在 Vue 2.x 隻是用來處理對象的監聽問題。設定

deep:true

後，Vue 就可以發現對象内部的數值變化。但是，在 Vue 2.x 中，監聽數組并不需要這麼做。

選項：deep

為了發現對象内部值的變化，可以在選項參數中指定

deep: true

。注意監聽數組的變更不需要這麼做。

摘抄自——《Vue api —— vm.$watch》

我們都知道 JS 的數組是一種特殊的對象。可能 Vue 3.x 的這次變動是為了統一 Vue 的在監聽對象處理吧！

本系列目錄

• Vue 3 遷移政策筆記—— 第1節：v-for 中的 Ref 數組
• Vue 3 遷移政策筆記—— 第2節：Async Components 異步元件
• Vue 3 遷移政策筆記—— 第3節：Attribute Coercion Behavior （屬性強制行為）
• Vue 3 遷移政策筆記——第4節：$attrs 包括class&style
• Vue 3 遷移政策筆記—— 第5節：移除 $children
• Vue 3 遷移政策筆記—— 第6節：自定義指令
• Vue 3 遷移政策筆記—— 第7節：自定義元素互動
• Vue 3 遷移政策筆記—— 第8節：Data 選項
• Vue 3 遷移政策筆記—— 第9節：新增 emits 選項
• Vue 3 遷移政策筆記—— 第10節：事件 API
• Vue 3 遷移政策筆記—— 第11節：移除過濾器
• Vue 3 遷移政策筆記—— 第12節：片段
• Vue 3 遷移政策筆記—— 第13節：函數式元件
• Vue 3 遷移政策筆記—— 第14節：全局 API
• Vue 3 遷移政策筆記—— 第15節：全局 API 的 tree shaking
• Vue 3 遷移政策筆記—— 第16節：Inline Template 屬性
• Vue 3 遷移政策筆記—— 第17節：Key 屬性
• Vue 3 遷移政策筆記—— 第18節：按鍵修飾符
• Vue 3 遷移政策筆記—— 第19節：移除 $listeners
• Vue 3 遷移政策筆記—— 第20節：Props 的預設值函數不能通路this
• Vue 3 遷移政策筆記—— 第21節：渲染函數 API
• Vue 3 遷移政策筆記—— 第22節：Slots 的統一
• Vue 3 遷移政策筆記—— 第23節：Transition Class 的變化
• Vue 3 遷移政策筆記—— 第24節：Transition Group 不再需要設定根元素
• Vue 3 遷移政策筆記—— 第25節：v-on.native修飾符被移除
• Vue 3 遷移政策筆記—— 第26節：在元件上使用 v-model 的變化
• Vue 3 遷移政策筆記—— 第27節：v-if 和 v-for 的優先級
• Vue 3 遷移政策筆記—— 第28節：v-bind 合并行為
• Vue 3 遷移政策筆記—— 第29節：數組的監聽