解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
更新時間：2018年09月11日 10:03:30 作者：HiZhg
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題
很早之前就遇到一個問題，父組件向子組件傳值，子組件監(jiān)聽傳入對象的某個屬性。發(fā)現(xiàn)子組件使用deep watch都不能觀察到對象中屬性的變化，今天終于找到為啥出現(xiàn)這種問題和解決辦法了。
解決
為啥出現(xiàn)這種問題？受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。
請參照https://v1-cn.vuejs.org/guide/reactivity.html
解決方式：
通過vue的this.$set(object, key, value)方法
通過Object.assign()重新創(chuàng)建一個對象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
代碼實例
<template>
<div>
<p @click="fun1" style="color: blue">方式一</p>
<p @click="fun2" style="color: blue">方式二</p>
</div>
</template>
<script>
export default {
data () {
return {
p: {a: 1}
}
},
methods: {
fun1 () {
console.log('click 1111')
// this.p.b = 2 // 通過點方法賦值，發(fā)現(xiàn)觀察不到p的變化
this.$set(this.p, 'b', 2) // 第一種解決方式，可以查看日志看到已經(jīng)監(jiān)聽到了變化
},
fun2 () {
console.log('click 2222')
this.p = Object.assign({}, this.p, {c: 3})
}
},
watch: {
p: {
handler (cval, oval) {
console.log('--------')
console.log(cval, oval)
},
deep: true
}
}
}
</script>
<style>
</style>
總結
個人推薦使用第二種解決方式，代碼寫起來更優(yōu)雅。第一種解決方式如果有多個值會出現(xiàn)，多行$set()語句。
以上這篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 計數(shù)器的實現(xiàn)，主要利用HTML實現(xiàn)步驟現(xiàn)在頁面上簡單實現(xiàn)一個計數(shù)器，內(nèi)容簡單且詳細,需要的朋友可以參考一下2021-10-10
Vue組件更新數(shù)據(jù)v-model不生效的解決
這篇文章主要介紹了Vue組件更新數(shù)據(jù)v-model不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Element實現(xiàn)表格表頭添加搜索圖標和功能
這篇文章主要介紹了使用Element實現(xiàn)表格表頭添加搜索圖標和功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關資料,需要的朋友可以參考下2022-10-10
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue與django集成打包的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了vue與iframe之間的交互方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue canvas繪制矩形并解決由clearRec帶來的閃屏問題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來的閃屏問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09