this.$set() 和 vue.set()

当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。只有预先初始化，定义在data()函数中的属性，对象，vue实例在初始化的时候会触发object.defineProperty()的方法，为每个属性和对象增加getter(),setter()方法，这样，这些属性和对象是受vue实例统一管理的，当修改某一个属性的时候，vue实例会监听它们的变化，进而触发dom更新视图

  二者几乎是一样的，set是绑定在Vue构造函数上，$set（）是绑定在Vue原型上的。

  this.$set(target, key, value)
        target为需要添加属性的对象，key是要添加的属性名，一般是字符串形式，也可以是数字，value为属性key对应的值。 

// 1.添加单个属性
this.$set(this.data, 'key', value)  // 注意这里的key是字符串的形式

// 添加多个属性,应该用两个对象
this.obj = Object.assign({}, this.obj, {age: 20, gender: ‘male’})
// 或
this.user = Object.assign( {}, this.user, {
    age: 23,
    gender: 'male'
})

// 对于数组
Vue.set(vm.items, indexOfItem, newValue)


// 对于对象
this.$set(this.obj, key, value)

 

Vue的数组里指向的是一个对象，这个对象里面有splice等方法，只有这里面的7个方法( splice()、 push()、pop()、shift()、unshift()、sort()、reverse() )才能触发渲染，对象里的__proto__才是指向Array 的对象。所以当我们直接更改数组的时候不会渲染页面, 使用set方法后其实就是调用了Vue数组中的splice，所以触发了渲染。