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
特點。
示例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>
到此這篇關於 vue 3 中watch 和watchEffect 的新用法的文章就介紹到這瞭,更多相關 vue 3 中watch 和watchEffect 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3中watch和watchEffect實戰梳理
- setup+ref+reactive實現vue3響應式功能
- 一文搞懂Vue3中watchEffect偵聽器的使用
- vue3常用的API使用簡介
- Vue3 Composition API的使用簡介