what:$set提供了属性赋值方法
vue实例额外提供了$set方法来进行对象的属性赋值
方法使用如下:
$set(target:Object,key:String,value:*);
{
data:{
test:{
name:"ljx"
}
},
created:function(){
var _self=this
_self.$set(_self.test,"name","lijiaxin");
//如此就为test对象的name属性赋值为字符串lijiaxin
}
}
why:有了操作符.为什么还会有$set
通常为vue的数据进行属性赋值时,经常是使用操作符.直接操作,然后通过双向数据绑定直接修改dom
<div id="app">
<span v-html="test.name"></span>
</div>
{
el:"#app",
data:{
test:{
name:"ljx"
}
},
created:function(){
var _self=this
_self.test.name="lijiaxin";
}
}
这种情况下,数据赋值成功后,Vue的双向数据绑定,会同时渲染到span元素,改变innerHtml
当如果为该对象之前并不存在的属性使用操作符.赋值,并不会触发双向数据绑定
<div id="app">
<span v-html="test.age"></span>
</div>
{
el:"#app",
data:{
test:{
name:"ljx"
}
},
created:function(){
var _self=this
_self.test.age="26";
}
}
此时span元素并没有渲染为26
因为vue的数据响应是在created之前就按照data配置进行数据的绑定劫持,重新新增的属性并没有绑定劫持,所以无法实时映射dom变化
$set作为操作符.的变种方法,通过内部方法机制满足了这种新增属性劫持的处理
<div id="app">
<span v-html="test.age"></span>
</div>
{
el:"#app",
data:{
test:{
name:"ljx"
}
},
created:function(){
var _self=this
_self.$set(_self.test,"age","26");
}
}
此时span元素重新渲染为26
how:$set是怎么处理的
$set操作时,针对新增的属性会重新将其通过Object.defineProperty进行劫持,并触发父级的依赖刷新,完成新的依赖收集