[[438961]]

選項(xiàng)式API與之前寫(xiě)法相同，本篇文章主要通過(guò) Options API 和 Composition API 對(duì)比 watch 的使用方法，讓您快速掌握 vue3 中 watch 新用法。建議收藏!

一、watch 新用法

選項(xiàng)式API中，watch 使用

watch:{ 
 mood(curVal,preVal){ 
  console.log('cur',curVal);//最新值 
  console.log('pre',preVal);//修改之前的值 
 } 
} 

1.1、watch 使用語(yǔ)法

在 Composition API 中，使用 watch 時(shí)，必須先引入。使用語(yǔ)法為：

import { watch } from "vue" 
watch( 
 name , 
 ( curVal , preVal )=>{ //業(yè)務(wù)處理  }, 
 options 
) 

 共有三個(gè)參數(shù)，分別為：

• name ：需要幀聽(tīng)的屬性
• (curVal,preVal)=>{ //業(yè)務(wù)處理 } 箭頭函數(shù)，是監(jiān)聽(tīng)到的最新值和本次修改之前的值，此處進(jìn)行邏輯處理。
• options ：配置項(xiàng)，對(duì)監(jiān)聽(tīng)器的配置，如：是否深度監(jiān)聽(tīng)。

頁(yè)面剛進(jìn)入的時(shí)候并不會(huì)執(zhí)行，值發(fā)生改變的時(shí)候，才會(huì)打印出當(dāng)前最新值和修改之前的值。

示例1：監(jiān)聽(tīng)一個(gè)數(shù)據(jù)

import { ref , watch } from "vue" 
export default{ 
 setup(){ 
  const mood = ref("") 
  //幀聽(tīng)器 
  watch(mood,(curVal,preVal)=>{ 
   console.log('cur',curVal); 
   console.log('pre',preVal); 
  },{ 
   //配置項(xiàng) 
  }) 
  return{ 
   mood 
  } 
 } 
} 

 watch 也可以監(jiān)聽(tīng)多個(gè)屬性值，此時(shí)傳入的數(shù)據(jù)變成數(shù)組形式，配置項(xiàng)保持不變。

1.2、watch 監(jiān)聽(tīng)多個(gè)屬性值

示例2：監(jiān)聽(tīng)多個(gè)屬性

watch([mood,target],([curMood,curTarget],[preMood,preTarget])=>{ 
 console.log('curMood',curMood); 
 console.log('preMood',preMood); 
 console.log('curTarget',curTarget); 
 console.log('preTarget',preTarget); 
},{ 
  //配置項(xiàng) 
}) 

1.3、watch 監(jiān)聽(tīng)引用數(shù)據(jù)類型

watch 監(jiān)聽(tīng)引用數(shù)據(jù)類型時(shí)，如果只監(jiān)聽(tīng)其中某個(gè)屬性時(shí)，使用語(yǔ)法如：

watch(()=>obj.name,(curValue,preValue)=>{ 
 //幀聽(tīng)引用數(shù)據(jù)類型的某個(gè)屬性 
},{ 
 //配置項(xiàng) 
}) 

 第一個(gè)參數(shù)，回調(diào)函數(shù)返回的是需要幀聽(tīng)對(duì)象的屬性。后邊的參數(shù)與上邊的一致。

示例3：幀聽(tīng)對(duì)象某個(gè)屬性

<template> 
 <div> 
  {{obj}} 
  <input type="text" v-model="obj.name"> 
 </div> 
</template> 
<script> 
import { ref , reactive , watch } from "vue" 
export default{ 
 setup(){ 
  const obj = reactive({ name:'qq',sex:'女' }) 
  watch(()=>obj.name,(cur,pre)=>{ 
   console.log('cur',cur); 
  },{ }) 
  return{ 
   obj 
  } 
 } 
} 
</script> 

 如果我們?cè)囍褜傩匀サ簦苯颖O(jiān)聽(tīng)整個(gè)對(duì)象，發(fā)現(xiàn)watch好像失效了。此時(shí)我們就需要引入 watchEffect。

二、watchEffect

watchEffect 也是一個(gè)幀聽(tīng)器，是一個(gè)副作用函數(shù)。它會(huì)監(jiān)聽(tīng)引用數(shù)據(jù)類型的所有屬性，不需要具體到某個(gè)屬性，一旦運(yùn)行就會(huì)立即監(jiān)聽(tīng)，組件卸載的時(shí)候會(huì)停止監(jiān)聽(tīng)。

示例4：監(jiān)聽(tīng)對(duì)象

<template> 
  <div> 
    {{obj}} 
    <input type="text" v-model="obj.name"> 
    <input type="text" v-model="obj.sex"> 
  </div> 
</template> 
<script> 
import {   reactive  , watchEffect } from "vue" 
export default{ 
  setup(){ 
    let obj = reactive({ name:'qq',sex:'女'}) 
    watchEffect(() => { 
      console.log('name',obj.name); 
      console.log('sex' , obj.sex); 
    }) 
    return{ 
      obj 
    } 
  } 
} 
</script> 

 watchEffect 參數(shù)只有一個(gè)回調(diào)函數(shù)。此時(shí)刷新頁(yè)面進(jìn)入，watchEffect 就會(huì)打印結(jié)果。

三、watch 與 watchEffect 區(qū)別和聯(lián)系

watch 與 watchEffect 都是監(jiān)聽(tīng)器，那么它們之間有什么關(guān)系呢?

3.1、watch特點(diǎn)

watch 監(jiān)聽(tīng)函數(shù)可以添加配置項(xiàng)，也可以配置為空，配置項(xiàng)為空的情況下，watch的特點(diǎn)為：

有惰性：運(yùn)行的時(shí)候，不會(huì)立即執(zhí)行。

更加具體：需要添加監(jiān)聽(tīng)的屬性。

可以訪問(wèn)屬性之前的值：回調(diào)函數(shù)內(nèi)會(huì)返回最新值和修改之前的值。

可配置：可以添加配置項(xiàng)。

3.2、watch 配置項(xiàng)

watch 的配置項(xiàng)可以補(bǔ)充watch特點(diǎn)上的不足，可以配置的有：

immediate：配置watch屬性是否立即執(zhí)行，值為 true 時(shí)，一旦運(yùn)行就會(huì)立即執(zhí)行，值為false時(shí)，保持惰性。

deep：配置 watch 是否深度監(jiān)聽(tīng)，值為 true 時(shí)，可以監(jiān)聽(tīng)對(duì)象所有屬性，值為 false 時(shí)保持更加具體特性，必須指定到具體的屬性上。

3.3、watchEffect 特點(diǎn)

watchEffect 副作用函數(shù)它的特點(diǎn)分別為：

非惰性：一旦運(yùn)行就會(huì)立即執(zhí)行。

更加抽象：使用時(shí)不需要具體指定監(jiān)聽(tīng)的誰(shuí)，回調(diào)函數(shù)內(nèi)直接使用就可以。相比watch比較難理解。

不可訪問(wèn)之前的值：只能訪問(wèn)當(dāng)前最新的值，訪問(wèn)不到修改之前的值。

3.4、watch 與 watchEffect 聯(lián)系

watch 的前兩個(gè)特點(diǎn)與 watchEffect 的兩個(gè)特點(diǎn)剛好相反，watch 通過(guò)配置項(xiàng)可以修改成帶有 watchEffect 特點(diǎn)。

示例5：watch 監(jiān)聽(tīng)對(duì)象

<template> 
 <div> 
  {{obj}} 
  <input type="text" v-model="obj.name"> 
 </div> 
</template> 
<script> 
import { ref , reactive , watch } from "vue" 
export default{ 
 setup(){ 
  const obj = reactive({ name:'qq',sex:'女' }) 
  watch(()=>obj,(cur,pre)=>{ 
   console.log('cur',cur); 
  },{  
   immediate:true, 
   deep:true 
  }) 
  return{ 
   obj 
  } 
 } 
} 
</script>