Vue3中watch的使用詳解
更新時(shí)間：2022年11月12日 16:26:45 作者：周圍都是小趴菜
這篇文章主要介紹了Vue3中watch的詳解,主要包括Vue2使用watch及Vue3使用watch的方法，通過多種情況實(shí)例代碼相結(jié)合給大家詳細(xì)講解，需要的朋友可以參考下
Vue3中watch的詳解
Vue2使用watch
<template>
<div>總合：{{ sum }}<button @click="sum++">點(diǎn)擊累加</button></div>
</template>
<script>
import { ref } from "vue";
export default {
// vue2中使用watch
watch: {
sum: {
deep: true,
handler(newValue, oldValue) {
console.log("總合 sum 變化：", newValue, oldValue);
},
},
},
setup() {
let sum = ref(0);
return {
sum,
};
},
};
</script>
<style>
</style>Vue3使用watch
watch有三個(gè)參數(shù)：
參數(shù)1：監(jiān)聽的參數(shù)
參數(shù)2：監(jiān)聽的回調(diào)函數(shù)
參數(shù)3：監(jiān)聽的配置（immediate）
情況1
監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)
<template>
<div>總合：{{ sum }}<button @click="sum++">點(diǎn)擊累加</button></div>
</template>// 監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)
<script>
import { ref, watch } from "vue";
export default {
setup() {
let sum = ref(0);
// 監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)
watch(sum, (newValue, oldValue) => {
console.log("sum ==> ", newValue, oldValue);
});
return {
sum,
};
},
};
</script>
情況2
監(jiān)視r(shí)ef所定義的多個(gè)響應(yīng)式數(shù)據(jù)
<template>
<div>總合：{{ sum }}<button @click="sum++">點(diǎn)擊累加</button></div>
<hr />
<div>
msg：{{ msg }}
<button @click="msg += '~'">改變msg</button>
</div>
</template><script>
import { ref, watch } from "vue";
export default {
setup() {
let sum = ref(0);
let msg = ref("watch使用"):
// 情況2：監(jiān)視r(shí)ef所定義的多個(gè)響應(yīng)式數(shù)據(jù)
watch([sum, msg], (newValue, oldValue) => {
console.log("sum/msg ==> ", newValue, oldValue);
},{immediate:true});
return {
sum,
msg,
};
},
};
</script>
情況3
監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)
注意：
- 這里無法正確獲取oldValue
- 強(qiáng)制開啟了深度監(jiān)聽（deep配置不生效）
<template>
<div>
<h3>情況3：:監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)</h3>
<div>姓名：{{person.name}}</div>
<div>年齡：{{person.age}}</div>
<button @click="person.name += '~'">修改姓名</button>
<button @click="person.age ++">修改年齡</button>
</div>
</template><script>
import { ref, watch,reactive } from "vue";
export default {
setup() {
let person = reactive({
name: "lisa",
age: 18,
job: {
joblist: {
money: 10,
},
},
});
// 情況3、監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)
/*
若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)，則無法正確獲得oldvalue!
若watch監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù)，則強(qiáng)制開啟了深度監(jiān)視
*/
watch(person,(newValue, oldValue) => {
console.log("person ==> ", newValue, oldValue);
},{immediate:true,deep:false}//這里的deep配置不再奏效
);
return {
person,
};
},
};
</script>情況4
監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性
<template>
<div>
<h3>情況4：:監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性</h3>
<div>姓名：{{person.name}}</div>
<div>年齡：{{person.age}}</div>
<button @click="person.name += '~'">修改姓名</button>
<button @click="person.age ++">修改年齡</button>
</div>
</template><script>
import { ref, watch,reactive } from "vue";
export default {
setup() {
let person = reactive({
name: "lisa",
age: 18,
job: {
joblist: {
money: 10,
},
},
});
// 情況4、監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性
watch(()=>person.name,(newValue, oldValue) => {
console.log("person.name ==> ", newValue, oldValue);
});
return {
person,
};
},
};
</script>
情況5
監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某些屬性
<template>
<div>
<h3>情況4：:監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某個(gè)屬性</h3>
<div>姓名：{{person.name}}</div>
<div>年齡：{{person.age}}</div>
<button @click="person.name += '~'">修改姓名</button>
<button @click="person.age ++">修改年齡</button>
</div>
</template><script>
import { ref, watch,reactive } from "vue";
export default {
setup() {
let person = reactive({
name: "lisa",
age: 18,
job: {
joblist: {
money: 10,
},
},
});
// 情況5、監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)中的某些屬性
watch([()=>person.name,()=>person.age],(newValue, oldValue) => {
console.log("person.name/person.age ==> ", newValue, oldValue);
});
return {
person,
};
},
};
</script>
特殊情況
watch監(jiān)聽reactive中對象的嵌套對象
<template>
<div>
<div>姓名：{{person.name}}</div>
<div>年齡：{{person.age}}</div>
<div>薪資：{{person.job.joblist.money}} K</div>
<button @click="person.name += '~'">修改姓名</button>
<button @click="person.age ++">修改年齡</button>
<button @click="person.job.joblist.money ++">提薪</button>
</div>
</template><script>
import { ref, watch,reactive } from "vue";
export default {
setup() {
let person = reactive({
name: "lisa",
age: 18,
job: {
joblist: {
money: 10,
},
},
});
// 特殊情況、監(jiān)視r(shí)eactive所定義嵌套對象
watch(()=>person.job,(newValue, oldValue) => {
console.log("person.job對象發(fā)生變化 ==> ", newValue, oldValue);
},{deep:true});//此處由于監(jiān)視的是reactive素定義的對象中的某個(gè)屬性，所以deep配置有效
return {
person,
};
},
};
</script>到此這篇關(guān)于Vue3中watch的詳解的文章就介紹到這了,更多相關(guān)Vue3 watch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3實(shí)現(xiàn)掛載全局方法和用getCurrentInstance代替this
這篇文章主要介紹了Vue3實(shí)現(xiàn)掛載全局方法和用getCurrentInstance代替this,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue基于websocket實(shí)現(xiàn)智能聊天及吸附動畫效果
這篇文章主要介紹了vue基于websocket實(shí)現(xiàn)智能聊天及吸附動畫效果,主要功能是基于websocket實(shí)現(xiàn)聊天功能，封裝了一個(gè)socket.js文件，使用Jwchat插件實(shí)現(xiàn)類似QQ、微信電腦端的功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了iView框架問題整理小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
之前在網(wǎng)上看到《藍(lán)色拼圖》這款小游戲，作者是用jquery寫的。下面通過本文給大家分享基于vue.js編寫藍(lán)色拼圖小游戲，一起看看實(shí)現(xiàn)代碼吧2017-03-03
Vue 使用Props屬性實(shí)現(xiàn)父子組件的動態(tài)傳值詳解
今天小編就為大家分享一篇Vue 使用Props屬性實(shí)現(xiàn)父子組件的動態(tài)傳值詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇對vue中v-on綁定自定事件的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
斗魚直播是比較火的直播視頻，想必大家都看過吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚直播步驟詳解,需要的朋友可以參考下2017-11-11
vue進(jìn)入頁面時(shí)不在頂部,檢測滾動返回頂部按鈕問題及解決方法
這篇文章主要介紹了vue進(jìn)入頁面時(shí)不在頂部，檢測滾動返回頂部按鈕問題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10