解决Vue2.0 watch对象属性变化监听不到的问题

【长沙网络推广分享】解决Vue 2.0中watch无法监听对象属性变化的问题

在我们日常的Vue开发中，有时会遇到这样的问题：在子组件中监听从父组件传来的对象属性的变化，却发现即便使用了deep watch，也无法捕捉到对象中属性的变化。今天，长沙网络推广就为大家详细这个问题及其解决方案。

一、问题

在ES5的环境下，Vue.js对于对象属性的添加或删除是无法检测的。也就是说，如果你直接通过一个对象的属性去赋值，例如 `this.p.b = 2`，Vue的watch功能是无法捕捉到这种变化的。

二、解决方案

针对上述问题，我们有以下两种解决方案：

1. 使用Vue的 `this.$set(object, key, value)` 方法。这是一种直接的解决方案，当使用 `$set` 方法为对象添加新属性时，Vue能够监听到这种变化。

2. 通过 `Object.assign()` 来重新创建一个对象。例如 `this.p = Object.assign({}, this.p, { a: 1, b: 2 })`。这种方式实际上是创建了一个新的对象，然后将其赋值给原数据，从而触发watch的监听。

三、代码实例

下面是一段示例代码，展示了上述两种解决方案的使用方式：

在模板部分：

```html

```

在脚本部分：

```javascript

export default {

data () {

return {

p: {a: 1}

}

},

methods: {

fun1 () {

console.log('click 1111')

// this.p.b = 2 // 通过点方法赋值，Vue无法监听到变化

this.$set(this.p, 'b', 2) // 使用$set方法，可以监听到变化

},

fun2 () {

console.log('click 2222')

this.p = Object.assign({}, this.p, {c: 3}) // 使用Object.assign()重新创建对象

}

},

watch: {

p: {

handler (cval, oval) {

console.log('--')

console.log(cval, oval) // 在控制台打印出变化前后的值

},

deep: true // 监听对象的变化

}

}

}

```

四、推荐使用方式

个人推荐使用第二种方式（使用Object.assign()），因为这种方式代码写起来更为优雅，而且在实际开发中更为常用。第一种方式（使用$set）在某些复杂场景下可能会稍显繁琐。具体使用哪种方式还需根据实际需求来决定。希望上述分享能对大家有所帮助，也希望大家能多多支持长沙网络推广和狼蚁SEO。