作用:当改变数组中的数据时,data中已经改变,但是页面不能进行实时渲染。
此时通过vm.$set的API来进行数组修改后的页面渲染、
1.vm.$set有三个参数 vm.$set(target,propertyName/index,value)
(目标对象,对象的属性名称/数组的下标索引值,要设置的新值)
使用$set改变数组的值
this.$set(this.list,0,'4')
2.常见问题
1——数组对象通过下标来操作数组中的对象是响应式的
data(){
list:[
{ name:"张三",
age:12
},
{
name:"李四",
age:18
}
]
},
mounted(){
this.list[0].name = "王五"
}
此时值改变的时候页面也会进行渲染,因为vue的内部针对于数组中对象会通过Object.definProperty来对所有属性进行劫持,来完成响应式,所以数组中对象元素都是响应式的,这里并没有通过数组下标来改变值,只是通过下标来获取相应的对象,而这个对象是响应式的。
2——利用下标操作数组属性也是响应式的?
data(){
list:[
{ name:"张三",
age:12
},
{
name:"李四",
age:18
}
],
listArr:[1,2,3]
},
mounted(){
this.list[0].name = "王五";
this.listArr[0] = 0;
}
- 在this.list[0]之后,data中的数据已经改变,但实际上视图并没有更新
- 执行到this.list[0].name = "王五"的时候,vm会发现这是响应式操作,会执行内部的observe中的setter,然后通知Dep(订阅器)发生了变化,最终更新视图
- 在对象的更新过程中,检测到数组listArr也发生了变化,但是视图并没有进行更新,此时vm会将listArr的变化也更新到视图
3.在前面可以发现,不是对象的属性都会被劫持从而称为响应式,为什么还要提供vm.$set来对对象属性进行操作呢?
对于已经创建的实例,Vue不允许动态添加根级别的·响应式property。但是可以使用vm.$set方法向嵌套对象添加响应式property。