問題
很早之前就遇到一個問題，父組件向子組件傳值，子組件監(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>總結(jié)
個人推薦使用第二種解決方式，代碼寫起來更優(yōu)雅。第一種解決方式如果有多個值會出現(xiàn)，多行$set()語句。
以上這篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
