一、基本使用

1. 寫法一：偵聽watch時，傳入一個getter函數(shù)

? ? ? ?const info = reactive({ name: "coco", age: 10 })

? ? ? ?watch(() => info.name, (newValue, oldValue) => {

? ? ? ? ? ? console.log("newValue: ", newValue);

? ? ? ? ? ? console.log("oldValue: ", oldValue);

? ? ? ? })

2. 寫法二：傳入一個可響應式對象：ref對象 reactive對象

情況一：reactive對象獲取到的newValue和oldValue本身都是reactive對象

情況二：ref對象獲取newVlaue和oldValue是value值的本身

二、watch偵聽多個數(shù)據(jù)源

1. 寫法一：Array （獲取到的對象是reactive對象）

? ? ? ?watch([info, name], (newValue, oldValue) => {

? ? ? ? ? ? console.log("newValue: ", newValue);

? ? ? ? ? ? console.log("oldValue: ", oldValue);

? ? ? ? })

2. 寫法二：getter函數(shù)，并且對可響應對象進行解構（獲取到的普通數(shù)組或對象）

? ? ? ?watch(() => [{ ...info }, name], (newValue, oldValue) => {

? ? ? ? ? ? console.log("newValue: ", newValue);

? ? ? ? ? ? console.log("oldValue: ", oldValue);

? ? ? ? })

三、深度監(jiān)聽

1. 監(jiān)聽 reactive對象/數(shù)組時，默認便有深度監(jiān)聽

2. 監(jiān)聽普通對象/數(shù)組時，watch添加第三個參數(shù){deep:true} 即可

四、立即執(zhí)行

watch添加第三個參數(shù){immediate: true} 即可

五、watchEffect（自動收集響應式的依賴）

1. 第一個參數(shù)：

2. 第二個參數(shù)：flush 執(zhí)行時機（不推薦）