🤔问题
Vue是一款在国内非常流行的框架,采用MVVM架构,它提供了一种响应式的数据双向绑定机制,使得开发者可以更方便地管理模型和视图。但是在Vue2中,由于使用了Object.defineProperty
来追踪属性变化,但是它只能追踪已经存在的属性,无法追踪动态添加的属性,导致我们动态添加了属性后视图也无法更新。这个时候就需要$set
的帮助了。
注:Vue3使用的是Proxy去监听属性变化,所以不会有这个问题。但是为了保持向后兼容性,Vue3仍然保留了这个方法,可以使用,但已经不是必需的!
📝回答
$set
是Vue提供的一个全局方法,它的作用是在响应式对象上添加一个属性,并确保这个属性是响应式的。这意味着,当这个属性的值发生变化时,Vue会自动更新视图。
$set
方法的语法如下:
/**object*/
//this
this.$set(object, propertyName, value)
//vue
Vue.set(object, propertyName, value)
/**Array*/
//this
this.$set(array, index, value)
//vue
Vue.set(array, index, value)
其中,object是要添加属性的对象,propertyName是要添加的属性名,value是要添加的属性值。
举个🌰栗子,假设我们有一个data对象:
data: {
user: {
name: '张三',
age: 18
}
}
如果我们想要添加一个新的属性gender,我们可以使用$set方法:
Vue.set(this.user, 'gender', '男')
这样,我们就成功地向user对象中添加了一个gender属性,Vue也会自动更新视图。
🎨使用场景
需要注意的是,$set方法不仅可以用于添加或修改对象属性,而且可以用于数组,并且数组可以使用Vue提供的变异方法,如push、pop、splice等。
动态添加属性
在Vue中,如果我们想要动态地添加一个属性,我们通常会使用以下方式:
this.obj.newProp = 'new value';
但是,这种方式会导致新添加的属性不是响应式的,也就是说,当这个属性的值发生变化时,视图不会自动更新。这时,我们就需要使用$set方法来确保新添加的属性是响应式的:
this.$set(this.obj, 'newProp', 'new value');
这样,当newProp的值发生变化时,视图会自动更新。
动态添加数组元素
在Vue中,如果我们想要动态地添加一个数组元素,我们通常会使用以下方式:
this.arr.push('new item');
我们也可以使用$set方法来确保新添加的元素是响应式的:
this.$set(this.arr, this.arr.length, 'new item');
这样,当新元素被添加到数组中时,视图会自动更新。
❌注意事项
虽然$set
方法可以解决动态添加属性和数组元素的问题,但是我们需要注意以下几点:
$set只能在响应式对象上使用
$set
方法只能在响应式对象上使用,如果我们在非响应式对象上使用$set
方法,它将不起作用。
$set不能用于根级别的属性
$set
方法不能用于根级别的属性,也就是说,我们不能使用$set
方法来添加或修改组件的根级别属性。如果我们需要修改根级别属性,我们应该在组件的data选项中声明这些属性。
$set的性能问题
$set
方法会对性能产生一定的影响,因为它需要遍历整个对象来确保新添加的属性是响应式的。因此,我们应该尽量避免频繁地使用$set方法。文章来源:https://www.toymoban.com/news/detail-428293.html
📄总结
$set
方法是Vue提供的一个全局方法,它的作用是在响应式对象上添加一个属性,并确保这个属性是响应式的。$set
方法的使用场景包括动态添加属性和数组元素。但是,我们需要注意$set
方法只能在响应式对象上使用,不能用于根级别的属性,并且会对性能产生一定的影响。文章来源地址https://www.toymoban.com/news/detail-428293.html
到了这里,关于【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!