Vue利用computed配合watch實現(xiàn)監(jiān)聽多個屬性的變化
但需要同時監(jiān)聽多個值的變化時,原始操作是通過去對每個屬性進行監(jiān)聽,
props: ['id', 'data', 'name', 'period', 'unit'],
因為watch可以監(jiān)聽計算屬性computed,可以通過computed把所有要監(jiān)聽的數(shù)據(jù)組成對象,再去監(jiān)聽該對象需要監(jiān)聽的數(shù)據(jù)逐個寫,這樣重復的代碼很多,不推薦這里想要實現(xiàn)的功能是,數(shù)據(jù)改變了,比對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 } },
到此這篇關于Vue利用computed配合watch實現(xiàn)監(jiān)聽多個屬性的變化的文章就介紹到這了,更多相關Vue computed現(xiàn)監(jiān)聽屬性變化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn)
這篇文章主要介紹了element-ui tooltip修改背景顏色和箭頭顏色的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-12-12vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04關于vue二進制轉圖片顯示問題 后端返回的是byte[]數(shù)組
這篇文章主要介紹了關于vue二進制轉圖片顯示問題 后端返回的是byte[]數(shù)組,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06基于vue和react的spa進行按需加載的實現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進行按需加載,需要的朋友可以參考下2018-09-09Vue動態(tài)添加class可能帶來的問題解讀(被覆蓋)
文章討論了在使用Vue.js時,通過動態(tài)class修改元素樣式時可能會遇到的問題,當通過JavaScript動態(tài)添加類時,Vue的動態(tài)class會覆蓋掉通過JavaScript添加的類,導致樣式丟失,這個問題在實際開發(fā)中可能會遇到,尤其是在使用第三方框架2024-12-12