vue的this.$set的作用

用于手动让vue实现动态绑定数据

如果我们在创建实例以后，再在实例上绑定新属性，vue是无法进行双向绑定的。
比如：

 

var data = {
    name: "zeller",
    age: '20',
}   
var key = 'content';
var vm = new Vue({
    el:'#app',
    data: data
});
data.sex = 'male'；

sex属于data的一个新属性，而vue的原理是，在创建实例的时候，遍历data里的值，监听'getter'和'setter'方法，一旦这些值更新了，就去触发对应的视图更新。

而sex并不是vue实例化的时候拥有的属性，所以我们新增这个属性，vue并没有对他的setter和getter方法进行监听，因此无法实现双向绑定

此时如果使用this.$set的话，vue就会对它进行双向绑定了。

 

methods:{
    setSex: function(){
        this.$set('sex','male')
    }
}

作者：Aleph_Zheng
链接：https://www.jianshu.com/p/e58f099c9133
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。