在 Vue.js 中,this.$set 是一个用于在响应式对象上设置属性的方法。它可以用于在 Vue 实例的数据对象或组件的响应式属性上添加新的属性,确保新添加的属性也是响应式的。
使用 this.$set 的语法如下:
this.$set(object, key, value)
其中,object 是要设置属性的对象,key 是要设置的属性名,value 是要设置的属性值。
默认情况下,Vue.js 的响应式系统会在初始化时对数据对象进行递归地劫持,使其成为响应式的。这意味着当你直接给一个已经存在的属性赋值时,Vue 会自动检测到这个变化并更新视图。但是,对于新增加的属性,Vue 无法自动追踪变化,这时就需要使用 this.$set 来手动将新增的属性转换为响应式。
下面是一个示例,演示如何在 Vue 实例中使用 this.$set:
// 在 Vue 实例的数据对象中添加一个新属性
this.$set(this.dataObject, 'newProperty', 'new value');
在上面的示例中,我们通过 this.$set 方法向 dataObject 对象和组件的响应式属性中添加了一个新的属性 newProperty,并为其赋值为 ‘new value’。这样做可以确保 newProperty 是响应式的,当其值发生变化时,相关的视图也会更新。
需要注意的是,this.$set 只能用于在响应式对象上设置属性。不能直接给vue实例中的data设置属性,错误示范:
this.$set(this.$data, 'newProperty', 'new value');
控制台报错:vue.js:634 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
官网也写了注意事项:
值得一提的是,直接给data中的对象赋值为一个对象,那么对象身上的属性值也是具有响应式的。
new Vue({
data() {
return {
myObject: {} // 将对象属性初始化为空对象
}
},
mounted() {
// Vue.set(this.myObject,'sex','男') // 生效,响应式
// this.$set(this.myObject,'sex','男') // 生效,响应式
// this.myObject.sex = '男' // 不生效,非响应式
this.myObject = {
name: 'John', // 直接给对象赋值为另一个对象,生效,响应式
age: 25
};
}
});
在上面的示例中,我们在 Vue 实例的 data 中将 myObject 属性初始化为空对象 {},然后在 mounted 钩子函数中直接将 myObject 赋值为另一个对象。由于赋值为新对象,Vue 的响应式系统会重新劫持 myObject,使其成为响应式的,你可以直接在页面中访问和使用 myObject 的属性。
如果帮助到您了,可以留下一个赞👍告诉我