vue.$set实现data对象下的属性深度监听,并触发视图的变化

vue.$set

vue为了更加简洁，当data的数据是数组或者对象时，动态的添加、修改对象中的属性，视图不会响应式更新。 vue无法对data中对象下的属性深度监听，并触发视图的变化。

• vue在vm实例上提供了 $set方法，用于监听属性变化并更新视图。
• 在Vue中，一般只有在data选项中声明的属性（或者是属性的属性）才是具有响应特性的。如果需要在data选项之外对已有属性添加（Vue 不允许动态添加根级响应式属性）具有响应特性的属性，需要用到Vue的set方法。

官方API

使用：

vm.$set(目标对象, 属性名/索引， 新值)    // vm为vue实例

this.$set(目标对象, 属性名/索引， 新值)   // this指向vm

// 参数1： 要修改的对象
// 参数2： 属性
// 参数3： 属性的值
// 返回值：已经修改好的值

vue数据响应的原理：

官方文档的解释：当把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。当改变data中属性的值时会触发其相应setter的调用，从而实现响应的操作。但getter和setter是有局限性的。

已经创建的vue实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

// 当修改对象的已有属性时，应该使用以下方法：
Vue.set(vm.userProfile, 'name', "Linda")

// 当为对象添加新属性时，应该使用以下方法：
Vue.set(vm.userProfile, 'age', 27)