vue2中为什么我们要用this.$set

在Vue.js 2中,this.$set的主要目的是在处理响应式数据对象时确保添加新属性时能够触发视图更新。

Vue.js通过使用Object.defineProperty来追踪属性的变化,但它有一个限制:如果你尝试添加一个新的属性到一个已经创建的对象,Vue.js将无法检测到这个变化,因为Object.defineProperty只能监听已经存在的属性。

这就是为什么在Vue.js 2中,如果你想要在响应式对象上添加新属性,并希望触发视图更新,你需要使用this.$set方法。

例如,如果你有一个data对象:

data: {
  myObject: {
    existingProperty: 'some value'
  }
}

如果你尝试直接添加一个新属性:

this.myObject.newProperty = 'another value';

Vue.js将无法检测到newProperty的变化。但是,通过使用this.$set

this.$set(this.myObject, 'newProperty', 'another value');

Vue.js就能够正确地追踪这个变化,从而触发视图的更新。

需要注意的是,Vue.js 3引入了一些改进,不再需要使用this.$set来添加新属性,因为它使用了Proxy来实现响应式数据。在Vue.js 3中,你可以直接添加新属性而无需使用this.$set

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容