[[438961]]

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

一、watch 新用法

選項式API中，watch 使用

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

1.1、watch 使用語法

在 Composition API 中，使用 watch 時，必須先引入。使用語法為：

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

 共有三個參數，分別為：

• name ：需要幀聽的屬性
• (curVal,preVal)=>{ //業務處理 } 箭頭函數，是監聽到的最新值和本次修改之前的值，此處進行邏輯處理。
• options ：配置項，對監聽器的配置，如：是否深度監聽。

頁面剛進入的時候并不會執行，值發生改變的時候，才會打印出當前最新值和修改之前的值。

示例1：監聽一個數據

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

 watch 也可以監聽多個屬性值，此時傳入的數據變成數組形式，配置項保持不變。

1.2、watch 監聽多個屬性值

示例2：監聽多個屬性

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

1.3、watch 監聽引用數據類型

watch 監聽引用數據類型時，如果只監聽其中某個屬性時，使用語法如：

watch(()=>obj.name,(curValue,preValue)=>{ 
 //幀聽引用數據類型的某個屬性 
},{ 
 //配置項 
}) 

 第一個參數，回調函數返回的是需要幀聽對象的屬性。后邊的參數與上邊的一致。

示例3：幀聽對象某個屬性

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

 如果我們試著把屬性去掉，直接監聽整個對象，發現watch好像失效了。此時我們就需要引入 watchEffect。

二、watchEffect

watchEffect 也是一個幀聽器，是一個副作用函數。它會監聽引用數據類型的所有屬性，不需要具體到某個屬性，一旦運行就會立即監聽，組件卸載的時候會停止監聽。

示例4：監聽對象

<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 參數只有一個回調函數。此時刷新頁面進入，watchEffect 就會打印結果。

三、watch 與 watchEffect 區別和聯系

watch 與 watchEffect 都是監聽器，那么它們之間有什么關系呢?

3.1、watch特點

watch 監聽函數可以添加配置項，也可以配置為空，配置項為空的情況下，watch的特點為：

有惰性：運行的時候，不會立即執行。

更加具體：需要添加監聽的屬性。

可以訪問屬性之前的值：回調函數內會返回最新值和修改之前的值。

可配置：可以添加配置項。

3.2、watch 配置項

watch 的配置項可以補充watch特點上的不足，可以配置的有：

immediate：配置watch屬性是否立即執行，值為 true 時，一旦運行就會立即執行，值為false時，保持惰性。

deep：配置 watch 是否深度監聽，值為 true 時，可以監聽對象所有屬性，值為 false 時保持更加具體特性，必須指定到具體的屬性上。

3.3、watchEffect 特點

watchEffect 副作用函數它的特點分別為：

非惰性：一旦運行就會立即執行。

更加抽象：使用時不需要具體指定監聽的誰，回調函數內直接使用就可以。相比watch比較難理解。

不可訪問之前的值：只能訪問當前最新的值，訪問不到修改之前的值。

3.4、watch 與 watchEffect 聯系

watch 的前兩個特點與 watchEffect 的兩個特點剛好相反，watch 通過配置項可以修改成帶有 watchEffect 特點。

示例5：watch 監聽對象

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