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

1、Vue在初始化时只会监听已存在的属性。2、新增属性不会触发响应式机制。3、可以使用Vue.set方法或全局API解决问题。Vue.js在初始化数据对象时，会将对象的属性转换成响应式的，但这只会对已存在的属性生效。新增的属性不会自动变成响应式的，因为Vue在初始化时并没有监听这些新属性。为了解决这个问题，可以使用Vue提供的Vue.set方法来给对象添加新属性并使其响应式。

一、Vue的响应式系统

Vue.js的响应式系统是其核心特性之一，通过Object.defineProperty对对象属性的getter和setter进行拦截，从而实现数据的双向绑定和自动更新。然而，这一机制在对象初始化时就已经确定，只会监听那些在对象创建时就存在的属性。

二、为什么新增属性不被监听

初始化过程：Vue在实例化时会遍历数据对象的所有属性，并使用Object.defineProperty将它们转换成getter和setter。这个过程只会在对象初始化时进行，新增属性不会触发这个机制。
性能考虑：监听所有可能的属性变化会带来巨大的性能开销，尤其是在数据对象非常庞大的情况下。因此，Vue选择只在初始化时监听已有属性。
JavaScript的限制：JavaScript本身没有提供直接的机制来检测对象属性的增加和删除，Vue只能通过绕过这些限制来实现响应式系统。

三、解决方法：使用Vue.set和全局API

为了解决新增属性不被监听的问题，Vue提供了Vue.set方法和全局API，确保新添加的属性也能参与响应式系统。

使用Vue.set方法

this.$set(this.someObject, 'newProperty', newValue);

使用全局API

Vue.set(this.someObject, 'newProperty', newValue);

四、实例说明

以下是一个实例说明，演示如何使用Vue.set方法来添加新属性并使其响应式。

<div id="app">
  <p>{{ someObject.existingProperty }}</p>
  <p>{{ someObject.newProperty }}</p>
  <button @click="addNewProperty">Add New Property</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      someObject: {
        existingProperty: 'I exist'
      }
    },
    methods: {
      addNewProperty() {
        this.$set(this.someObject, 'newProperty', 'I am new and reactive!');
      }
    }
  });
</script>

在这个例子中，点击按钮后，新属性newProperty将被添加到someObject中，并且是响应式的。

五、Vue 3的改进：Proxy

在Vue 3中，响应式系统使用了Proxy对象，这使得监听新增和删除属性变得更加简洁和高效。以下是Vue 3的一个示例：

<div id="app">
  <p>{{ someObject.existingProperty }}</p>
  <p>{{ someObject.newProperty }}</p>
  <button @click="addNewProperty">Add New Property</button>
</div>
<script>
  const { reactive } = Vue;
  const app = Vue.createApp({
    setup() {
      const someObject = reactive({ existingProperty: 'I exist' });
      function addNewProperty() {
        someObject.newProperty = 'I am new and reactive!';
      }
      return {
        someObject,
        addNewProperty
      };
    }
  });
  app.mount('#app');
</script>

在Vue 3中，使用Proxy对象能够自动监听属性的新增和删除，解决了Vue 2中需要手动使用Vue.set的局限。

六、总结

总结来说，Vue 2的响应式系统在对象初始化时只会监听已存在的属性，而新增的属性需要使用Vue.set方法或全局API来确保其响应式。Vue 3通过使用Proxy对象解决了这一问题，使得响应式系统更加简洁和高效。为了确保项目的响应式特性，开发者应根据所用Vue版本选择适当的方法。

行动步骤

检查Vue版本：根据使用的Vue版本选择适当的方法。
使用Vue.set方法：在Vue 2中，确保新增属性使用Vue.set方法。
升级到Vue 3：考虑升级到Vue 3以简化响应式系统的使用。
测试新属性：确保新增属性在应用中正确响应。
优化性能：在大型数据对象中，谨慎添加新属性以避免性能问题。

相关问答FAQs：

1. 为什么Vue不会监听动态添加的新属性？

在Vue中，数据的响应式是通过Object.defineProperty来实现的，它会在对象上定义getter和setter来拦截属性的访问和修改。然而，当我们动态地给一个已经被Vue实例代理的对象添加新属性时，Vue无法事先知道这个新属性的存在，因此也就无法给这个新属性添加getter和setter。

2. 如何让Vue监听动态添加的新属性？

虽然Vue默认情况下不会监听动态添加的新属性，但我们可以通过使用Vue提供的Vue.set或this.$set方法来手动告诉Vue去监听这个新属性。这两个方法的用法是一样的，都接受三个参数：对象、属性名和属性值。例如：

Vue.set(obj, 'newProp', 123);
// 或者
this.$set(this.obj, 'newProp', 123);

通过调用Vue.set或this.$set方法，Vue会在对象上添加新属性，并将新属性设置为响应式的，这样在修改新属性时，Vue就能够检测到并触发相应的更新。

3. 有没有其他方式来让Vue监听动态添加的新属性？

除了使用Vue.set或this.$set方法外，我们还可以使用Object.assign方法来间接实现Vue监听动态添加的新属性。Object.assign方法可以将一个或多个源对象的属性复制到目标对象中，如果目标对象已经存在相同的属性，则会进行覆盖。

所以，我们可以先创建一个空对象作为目标对象，然后将原始对象的属性和新属性都复制到目标对象中，最后再将目标对象赋值给Vue实例的data属性。这样，Vue就能够监听到新属性的变化了。例如：

data() {
  return {
    obj: Object.assign({}, this.obj, { newProp: 123 })
  };
}

通过使用Object.assign方法，我们可以将动态添加的新属性合并到目标对象中，从而让Vue能够监听到这个新属性的变化。

文章标题：vue赋值新属性为什么不被监听，发布者：worktile，转载请注明出处：https://worktile.com/kb/p/3546576