vue3中的watch和watchEffect

1、watch

兩個小“坑”：

• 監視reactive定義的響應式資料時：oldValue無法正确擷取、強制開啟了深度監視（deep配置失效）。參考情況三和情況六
• 監視reactive定義的響應式資料中某個屬性時：deep配置有效。參考情況六

1、情況一：監視ref定義的響應式資料

 監視ref定義的響應式資料文法：

watch(sum,(newValue,oldValue)=>{
    console.log('sum變化了',newValue,oldValue)
},{immediate:true}) 
           

• 這個地方let sum=ref(0)，監視的時候不需要寫sum.value，因為監視的是真正儲存資料RefImpl的結構，不是具體的值，是以這裡不需要【.value】
• 監視person=ref({name:"ZHANGSAN"，age:19})的時候，需要.value，因為person是拿ref定義的，我們是想監視的是person裡面的RefImpld的.value的proxy，是以person需要.value，這樣監測的就不再是ref所定義的資料了，而是ref裡借助reactive定義的Proxy資料，相當于下面的情況3-6。

• 監視person=ref({name:"ZHANGSAN"，age:19})的時候，如果不想.value，那麼監視的是一個RefImpl的結構，我們想要深層檢測RefImpl裡面的value裡面的屬性，需要加上深度監視

 例子： 

 2、情況二：監視ref所定義的多個響應式資料

 監視多個ref定義的響應式資料文法：

（将多個值放在數組中，相應的newValue和oldValue也将會是對應的數組）

watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg變化了',newValue,oldValue)
}) 
           

 例子：

3、情況三：監視reactive定義的響應式資料

• 監視reactive定義的響應式資料時：oldValue無法正确擷取、
• 監視reactive定義的響應式資料時，強制開啟了深度監視（deep配置失效）。

監視reactive定義的響應式資料文法：

/* 情況三：監視reactive定義的響應式資料
			若watch監視的是reactive定義的響應式資料，則無法正确獲得oldValue！！
			若watch監視的是reactive定義的響應式資料，則強制開啟了深度監視 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person變化了',newValue,oldValue)
},{immediate:true,deep:false}) //此處的deep配置不再奏效，是以不要寫deep:false
           

 例子：

4、情況四：監視reactive定義的響應式資料中的某個屬性

因為情況三中，watch無法監視reactive定義的proxy對象，那些不是對象類型的可以嗎？可以

當監視reactive定義的響應式資料中的是某個屬性時：

• 監視的資料必須是函數方式傳回才行
• 可以擷取到正确的newvalue和oldvalue

文法：

watch(
      () => person.name,
      (newValue, oldValue) => {
        console.log("person的name變化了", newValue, oldValue);
      }
    );
           

例子： 

5、情況五：監視reactive定義的響應式資料中的某些屬性

當想監視多個情況四對應的屬性怎麼辦呢？可以用數組實作

• 監視的資料必須是函數方式傳回才行
• 可以擷取到正确的newvalue和oldvalue

文法：

watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job變化了',newValue,oldValue)
},{immediate:true,deep:true})
           

例子： 

 6、情況六：監視reactive定義的響應式資料中的某些對象

• 監視reactive定義的響應式資料中某個屬性時：deep配置有效。  

 如果想拿到正确的newValue和oldValue怎麼辦呢，參考情況四，把檢測的資料變成一個屬性而不是一個對象

2、watchEffect

 需要引入：

import { watchEffect } from 'vue'      

• watch的套路是：既要指明監視的屬性，也要指明監視的回調。
• watchEffect的套路是：不用指明監視哪個屬性，監視的回調中用到哪個屬性，那就監視哪個屬性。
• watchEffect有點像computed：
  • 但computed注重的計算出來的值（回調函數的傳回值），是以必須要寫傳回值。
  • 而watchEffect更注重的是過程（回調函數的函數體），是以不用寫傳回值。

//watchEffect所指定的回調中用到的資料隻要發生變化，則直接重新執行回調。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回調執行了')
})
           

參考視訊：

尚矽谷Vue2.0+Vue3.0全套教程，全網最新最強vuejs從入門到精通_哔哩哔哩_bilibili