溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
問題
很早之前就遇到一個問題，父組件向子組件傳值，子組件監聽傳入對象的某個屬性。發現子組件使用deep watch都不能觀察到對象中屬性的變化，今天終于找到為啥出現這種問題和解決辦法了。
解決
為啥出現這種問題？受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。
請參照https://v1-cn.vuejs.org/guide/reactivity.html
解決方式：
通過vue的this.$set(object, key, value)方法
通過Object.assign()重新創建一個對象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
代碼實例
<template>
<div>
<p @click="fun1" >方式一</p>
<p @click="fun2" >方式二</p>
</div>
</template>
<script>
export default {
data () {
return {
p: {a: 1}
}
},
methods: {
fun1 () {
console.log('click 1111')
// this.p.b = 2 // 通過點方法賦值，發現觀察不到p的變化
this.$set(this.p, 'b', 2) // 第一種解決方式，可以查看日志看到已經監聽到了變化
},
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>
總結
個人推薦使用第二種解決方式，代碼寫起來更優雅。第一種解決方式如果有多個值會出現，多行$set()語句。
以上這篇解決Vue2.0 watch對象屬性變化監聽不到的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
