vue 3 中watch 和watchEffect 的新用法
目錄
- 一、watch 新用法
- 1.1、watch 使用語法
- 1.2、watch 監聽多個屬性值
- 1.3、watch 監聽引用資料型別
- 二、watchEffect
- 三、watch 與 watchEffect 區別和聯絡
- 3.1、watch特點
- 3.2、watch 配置項
- 3.3、watchEffect 特點
- 3.4、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 ""
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:'qqwww.cppcns.com',sex:'女' })
watch(()=>obj.name,(cur,pre)=>{
console.log('cur',cur);
},{ })
return{
obj
}
}
}
</script>
如果我們試著把屬性去掉，直www.cppcns.com接監聽整個物件，發現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,watch } from "vue"
export default{
setup(){
const obj = reactive({ name:'qq',sex:'女' })
watch(()=>obj,{
immediate:true,deep:true
})
return{
obj
}
}
}
</script>
到此這篇關於 vue 3 中watch 和watchEffect 的新用法的文章就介紹到這了,更多相關 vue 3 中watch 和watchEffect 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！