vue 3 中watch 和watchEffect 的新用法

一、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 特點。

示例5watch 監聽對象

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

到此這篇關於 vue 3 中watch 和watchEffect 的新用法的文章就介紹到這瞭,更多相關 vue 3 中watch 和watchEffect 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: