理解Vue响应式原理以及this.$set

https://www.jb51.net/article/162232.htm
https://baijiahao.baidu.com/s?id=1667581867911645201&wfr=spider&for=pc
https://cn.vuejs.org/v2/guide/reactivity.html

前言：其实使用vue的都知道，vue声明在data中的属性都是响应式的，也就是，我们在修改data中的属性时，一般页面都能实时更新。但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。比如我们对data中的对象属性和数组属性进行一些修改时，无法响应式更新渲染到页面，因此vue提供了$set这个API来解决这个限制。

1、Vue响应式原理

Vue响应式原理实现方法时Object.defineProperty()方法，该方法存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响。

Vue中编写了一个wather来处理数据

在使用getter方法时，总会通知wather实例对view层渲染页面
同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新
2、响应式原理示意图

3、检测数据变化

对于对象
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

var vm = new Vue({
   
  data:{
   
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

也就是说a的变化会使得视图层刷新，b的变化不会导致视图层刷新

对于已经创建的实例（比如为数组对象添加或者修改一个对象值），Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

Vue.set(