vuewatch使用教程學習?選項式API與之前寫法相同，本篇文章主要通過 Options API 和 Composition API 對比 watch 的使用方法，讓您快速掌握 vue3 中 watch 新用法建議收藏，下面我們就來聊聊關于vuewatch使用教程學習?接下來我們就一起去了解一下吧!
選項式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
)
共有三個參數，分别為：
頁面剛進入的時候并不會執行，值發生改變的時候，才會打印出當前最新值和修改之前的值。
示例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。
二、watchEffectwatchEffect 也是一個幀聽器，是一個副作用函數。它會監聽引用數據類型的所有屬性，不需要具體到某個屬性，一旦運行就會立即監聽，組件卸載的時候會停止監聽。
示例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特點上的不足，可以配置的有：
3.3、watchEffect 特點
watchEffect 副作用函數它的特點分别為：
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>
好了小編今天的文章就到此結束了，喜歡我的可以點個關注哦！
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
