vue赋值新属性为什么不被监听

Vue是一个基于数据驱动的框架，通过双向绑定机制实现了数据的自动更新。在Vue实例中，只有在初始化时定义的data属性才会被Vue进行双向绑定，并被Vue的响应式系统监听。

当我们给Vue实例的data对象中的属性赋予一个新属性时，由于Vue的初始化过程已经完成，新属性并没有被Vue的响应式系统所监听。这是因为Vue只会对初始化时已经定义的属性进行响应式处理。

解决这个问题的方法有两种：

1. 使用Vue.set()方法或者this.$set()方法：这两个方法可以在Vue实例中给对象添加响应式属性。示例代码如下：

this.$set(this.dataObject, 'newProperty', value);

其中，this.dataObject是已经存在的响应式对象，'newProperty'是要添加的新属性，value是新属性的初始值。

2. 在初始化时就定义好所有可能需要添加的属性：在Vue实例的data属性中，可以预先定义好所有可能会添加的属性，并给它们赋予一个初始值。这样，在需要添加新属性时，只需要修改已经存在的属性的值，而不需要真正添加新属性。

总结起来，对于Vue实例的响应式属性，如果需要添加新属性，可以使用Vue.set()方法或者在初始化时就定义好所有可能需要添加的属性。这样可以确保新属性也能被Vue的响应式系统所监听，并实现数据的自动更新。

在Vue中，当我们使用绑定语法（v-bind）或者直接给data属性赋值时，Vue会在实例创建过程中对data对象进行响应式处理。这意味着Vue会将data属性转换为getter和setter，以便在属性被修改时能够触发视图的更新。

然而，当我们给data对象中添加新属性时，这个新属性默认情况下不会被Vue的响应式系统所监听。这是因为Vue在创建实例时只会对data对象中已经存在的属性进行响应式处理，而没有在实例化之后动态添加的属性。

具体来说，给data对象中的属性赋值时，Vue会将该属性转换为一个reactive proxy，使得Vue能够追踪该属性的变化并在视图中进行更新。但是，对于后续添加的属性，Vue并不会自动将其转换为reactive proxy。

要想让后续添加的属性也能被响应式系统监听，有几种方法可以解决这个问题：

1. 使用Vue.set()或者this.$set()方法：这两个方法可以用来给对象添加新的响应式属性。例如，可以通过this.$set(this.dataObj, "newProp", value)来给data中的对象添加一个新属性。

2. 使用Vue.observable()方法：该方法可以用来创建一个可观察的对象，其中所有的属性都会被Vue的响应式系统监听。例如，可以通过this.dataObj = Vue.observable({ newProp: value })来创建一个可观察的对象，并将其赋值给data。

3. 在data对象中初始化所有可能用到的属性：如果我们预先知道所有可能添加的属性，可以在data对象中初始化这些属性，即使初始值为空或者null。这样，在后续添加属性时，Vue也会对其进行监听。

4. 使用Vue的计算属性或者watch特性来监听新增的属性：如果我们只是需要监听新增属性的变化，并不需要将其转换为响应式数据，可以使用Vue的计算属性或者watch特性来实现。通过在计算属性或者watch中对新增属性进行监听，可以在属性变化时执行相应的逻辑。

5. 使用Vue.observable()方法创建一个新的完整响应式数据对象：如果我们确定需要频繁添加新属性，并且需要这些新增属性都能被Vue的响应式系统监听，可以通过使用Vue.observable()方法创建一个新的完整的响应式数据对象，然后将这个对象赋值给data。这样，以后添加的所有属性都会被响应式系统监听。

在Vue中，通过给已经存在的对象或数组添加新属性，可能不会被Vue的数据监听所捕捉到。这是因为Vue在实例化时会将对象数据进行劫持，即将对象的所有属性都转为getter和setter来跟踪数据变化。但是对于已经存在的对象属性，Vue无法为其添加getter和setter，因此当给这些属性赋值时，无法触发Vue的数据监听。

解决这个问题的方法有几种，下面分别介绍。

使用Vue.set()方法

Vue提供了一个全局方法Vue.set()，该方法用于向已经创建的响应式对象中添加动态属性。Vue.set()方法接受三个参数：对象、属性名、属性值。

Vue.set(object, propertyName, value)

使用Vue.set()方法，Vue会将新属性转换为getter和setter，并触发依赖更新，这样新添加的属性也会被监听。

使用全局的 $set()方法

除了Vue.set()方法，Vue还提供了一个全局的 $set()方法，用法和Vue.set()一样。

this.$set(object, propertyName, value)

在Vue组件中，可以通过this.$set()方法来给已经存在的对象添加新属性。这样，新添加的属性就可以被Vue的数据监听所捕捉到。

使用Object.assign()方法

另一种给已存在对象添加新属性的方法是使用Object.assign()方法。Object.assign()方法可以将一个或多个源对象的属性复制到目标对象中。当目标对象已有相同属性名时，会用源对象的属性值覆盖目标对象的属性值。

this.object = Object.assign({}, this.object, { newProp: value })

通过将已存在的对象作为目标对象，使用Object.assign()方法将新属性添加到目标对象中。这样，新添加的属性就会被Vue的数据监听所捕捉。

使用全局mixin

Vue提供了全局的mixin功能，可以将一些公共的方法或属性混入到所有的组件中。可以在mixin中定义一个created()生命周期钩子函数，并在函数中给已存在的对象添加新属性。

Vue.mixin({
  created() {
    this.object.newProp = value
  }
})

这样，每个组件在创建时都会执行mixin中定义的created()钩子函数，从而给已存在的对象添加新属性。

以上是几种在Vue中给已存在的对象添加新属性的方法，使用这些方法可以将新添加的属性纳入Vue的数据监听中，确保数据的响应性。