vue 3 學習筆記 (六)——watch 、watchEffect 新用法

前端人發表於2021-11-23
Vue筆記

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

一、watch 新用法

選項式API中，watch 使用

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

 

2.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 也可以監聽多個屬性值，此時傳入的資料變成陣列形式，配置項保持不變。

2.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);
},{
  //配置項
})

 

2.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的特點為：

  1. 有惰性：執行的時候，不會立即執行。
  2. 更加具體：需要新增監聽的屬性。
  3. 可以訪問屬性之前的值：回撥函式內會返回最新值和修改之前的值。
  4. 可配置：可以新增配置項。

3.2、watch 配置項

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

  1. immediate：配置watch屬性是否立即執行，值為 true 時，一旦執行就會立即執行，值為false時，保持惰性。
  2. deep：配置 watch 是否深度監聽，值為 true 時，可以監聽物件所有屬性，值為 false 時保持更加具體特性，必須指定到具體的屬性上。

3.3、watchEffect 特點

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

  1. 非惰性：一旦執行就會立即執行。
  2. 更加抽象：使用時不需要具體指定監聽的誰，回撥函式內直接使用就可以。相比watch比較難理解。
  3. 不可訪問之前的值：只能訪問當前最新的值，訪問不到修改之前的值。

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>

 

好了小編今天的文章就到此結束了，喜歡我的可以點個關注哦！

相關文章