問題

很早之前就遇到一個問題，父組件向子組件傳值，子組件監聽傳入對象的某個屬性。發現子組件使用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" 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 // 通過點方法賦值，發現觀察不到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對象屬性變化監聽不到的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。