Vue利用computed配合watch實(shí)現(xiàn)監(jiān)聽多個(gè)屬性的變化
但需要同時(shí)監(jiān)聽多個(gè)值的變化時(shí)，原始操作是通過去對(duì)每個(gè)屬性進(jìn)行監(jiān)聽，
props: ['id', 'data', 'name', 'period', 'unit'],
因?yàn)閣atch可以監(jiān)聽計(jì)算屬性computed，可以通過computed把所有要監(jiān)聽的數(shù)據(jù)組成對(duì)象，再去監(jiān)聽該對(duì)象需要監(jiān)聽的數(shù)據(jù)逐個(gè)寫，這樣重復(fù)的代碼很多，不推薦這里想要實(shí)現(xiàn)的功能是，數(shù)據(jù)改變了，比對(duì)name1和name2是否一致，顯示巧用computed更勝一籌
原始方法
watch: {
data: {
handler() {
if (this.chart) {
this.setOption();
}
},
deep: true,
immediate: false
},
period: {
handler() {
if (this.chart) {
this.setOption();
}
},
deep: true,
immediate: false
}
}computed
computed: {
chartData() {
const {data, name, period, unit} = this
return{
data, name, period, unit
}
}
},
watch: {
chartData: {
handler(newVal, oldVal) {
if (this.chart) {
this.setOption();
}
},
deep: true,
immediate: false
}
},到此這篇關(guān)于Vue利用computed配合watch實(shí)現(xiàn)監(jiān)聽多個(gè)屬性的變化的文章就介紹到這了,更多相關(guān)Vue computed現(xiàn)監(jiān)聽屬性變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-06
vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
echarts uniapp沒有dom renderjs解決uniapp無法獲取Dom問題
文章主要介紹了uni-app在app和h5端引入echarts的方法及注意事項(xiàng),以及通過renderjs技術(shù)來解決echarts在跨端和動(dòng)畫性能上的問題,并給出使用總結(jié)2026-05-05
vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
這篇文章主要介紹了vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue中this.$http.post()跨域和請(qǐng)求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請(qǐng)求參數(shù)丟失的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在開發(fā)Vue應(yīng)用時(shí),我們經(jīng)常需要在多個(gè)組件中復(fù)用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫中導(dǎo)入的,下面我們就來看看如何正確引用和使用外部方法吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
這篇文章主要介紹了Vue組件公用方法提取mixin實(shí)現(xiàn)，多個(gè)組件共用一個(gè)方法時(shí)可以用?mixin?抽取到一個(gè)js文件中，作為共用方法，下面一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧2022-03-03
下面小編就為大家?guī)硪黄獪\談mint-ui loadmore組件注意的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11