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进行劫持，并触发父级的依赖刷新，完成新的依赖收集