Vue中用watch一次監(jiān)聽多個值變化的示例詳解
更新時間：2024年01月04日 10:39:28 作者：小白探索世界歐耶！~
在Vue中,watch 本身不能監(jiān)聽多個變量,但我們可以通過返回具有計算屬性的對象然后監(jiān)聽該對象,從而實現(xiàn)一次性“監(jiān)聽多個變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個值變化的示例,需要的朋友可以參考下
在Vue中，watch 本身不能監(jiān)聽多個變量。但我們可以通過返回具有計算屬性的對象然后監(jiān)聽該對象，從而實現(xiàn)一次性“監(jiān)聽多個變量”。
- 在data中定義需要的屬性
- 在computed中返回一個包含將被監(jiān)聽的的各個對象的計算屬性
- 在watch中監(jiān)聽該計算屬性
舉個例子：
export default {
data() {
return {
msg1: "message1",
msg2: "message2"
}
},
computed: {
msgObj() {
const { msg1, msg2 } = this
return {
msg1,
msg2
}
}
},
watch: {
msgObj: {
handler(newVal, oldVal) {
//newVal和oldVal的值就是新舊msgObj的值，即msg1和msg2的值
//接下來在這里寫將要進行的操作
if (newVal.msg1 != oldVal.msg1) {
console.log( "msg1 is change!!!" )
}
if (newVal.msg2 != oldVal.msg2) {
console.log( "msg2 is change!!!" )
}
},
deep: true
}
}
}這樣，我們就實現(xiàn)了再watch中一次性監(jiān)聽兩個值的變化。
想要一次性監(jiān)聽更多個值也可以這么操作。
以上就是Vue中用watch一次監(jiān)聽多個值變化的示例詳解的詳細內(nèi)容，更多關(guān)于Vue watch一次監(jiān)聽多個值的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue組件從開發(fā)到發(fā)布的實現(xiàn)步驟
這篇文章主要介紹了vue組件從開發(fā)到發(fā)布的實現(xiàn)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-org-tree實現(xiàn)導出組織架構(gòu)圖方式
vue-org-tree是一個用于展示組織架構(gòu)圖的Vue組件,要實現(xiàn)組織架構(gòu)圖導出,可使用html2canvas庫將組織架構(gòu)圖轉(zhuǎn)換為圖片,并利用FileSaver.js庫保存生成的圖片,步驟包括安裝依賴和js實現(xiàn)邏輯,此為個人經(jīng)驗,僅供參考2026-05-05
這篇文章主要給大家介紹了關(guān)于vue動態(tài)設(shè)置頁面title的相關(guān)資料，文中通過實例代碼結(jié)束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue2?響應式系統(tǒng)之深度響應，文章基于Vue2?響應式系統(tǒng)的相關(guān)資料展開對Vue2?深度響應的介紹，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了基于Vue.js的移動組件庫cube-ui，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了使用 webpack 插件自動生成 vue 路由文件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue2.0 實現(xiàn)導航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實現(xiàn)導航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實現(xiàn)導航守衛(wèi)（navigation-guards），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10