vue响应式原理
vue响应式原理
什么是响应式
vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。
所谓的响应式，就是指模型层(model，只是普通 JavaScript 对象）发生变化了，就更新视图(view)
其实，就是前面提到的mvvm思想中来的单向数据绑定。
M，model发生了变化，那么我们的v，view随之更新。
典型的一些表现
- 更新data中的数据，当前组件的视图更新
- 更新data中的数据，计算属性也会更新
- 更新data中的数据，传递到子组件中的数据也会更新
表现1：组件视图的响应
表现2：计算属性的响应
表现3：子组件的响应式
效果：
是不是说，只要data代理的数据发生的变化，我们的视图就一定会更新呢？
答案是否定，请看如下案例：
效果如下：
说明，这种情况不具备响应式特点，为什么呢？
其原因和vue.js的响应式原理有关系的。
响应式原理（面试）
把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
由于Object.defineProperty是es5中的方法，所以对于ie8及其以下的浏览器，vue.js是不支持的。
可以通过控制体查看这个信息：
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
其图示如下：
这个模式，叫做观察者模式。
在这里，watcher监视data中代理的数据，一旦发生了变化，就会通知视图，进行更新操作。
为什么，刚才设置book的author属性，没有更新呢？
原因在于，book中并没有声明author属性，对应的就不存在getter和setters方法，所以，book中除name和price，其他任何的属性都没有列入观察的范围，所以就不具备响应特点。
基于这个响应式原理：受现代 JavaScript 的限制，Vue 不能检测到对象属性的添加或删除。
响应式细节
在使用vue.js来实现响应式，需要注意以下几点：
- Vue不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值
- 受现代JavaScript的限制，Vue不能检测到对象属性的添加或删除
- 数组直接修改索引也不能被检测到
- 可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
- 还可以使用vm.$set实例方法，这也是全局 Vue.set 方法的别名
- 父组件的对象传递给子对象，在子对象中可以修改该对象
- Vue 异步执行 DOM 更新,为了在数据变化之后等待 Vue 完成更新 DOM,可以使用Vue.nextTick(callback)。
a.Vue不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值
如：
查看控制台如下：
b.受现代JavaScript的限制，Vue不能检测到对象属性的添加或删除，数组直接修改索引也不能被检测到
这个不会效果。
Vue.js提供了两种方式：
- 可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
- 还可以使用vm.$set实例方法，这也是全局 Vue.set 方法的别名
使用set，编写代码如下：
测试，ok。
针对数组，使用索引来修改，也不会有响应特点。
点击，不会发生变化，如下：
也是可以使用set来进行修改，如下：
效果如下：
c.父组件的对象传递给子对象，在子组件中可以修改该对象
在子组件中，修改传递的基本类型数据，是不允许的，如下：
如果是对象类型呢？
修改如下：
实际上，由于对象在传递的时候，是传递的地址，父子组件中的对象是指同一个对象。
所以，在子组件中，是可以去修改父组件传递过来的对象。
vue.sync
vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。 2.3.0 又重新引入了 .sync 修饰符。只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
实际上，当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果不用.sync，也可以props传初始值，然后事件监听，实现起来也不算复杂。
d.Vue 异步执行 DOM 更新,为了在数据变化之后等待 Vue 完成更新 DOM。可以使用Vue.nextTick(callback)。
在vue.js中，model的变化，会导致视图发生更新，所谓视图更新，说白了，就是指dom更新。
但是，不要简单的认为这个更新操作是立刻完成。实际上，它是后续才完成的。
看着页面是发生变化了，变化的时刻并不是修改完数据的那一刻。
编写代码如下：
测试，如下：
说明，并不是一修改完这个msg，就立刻更新视图了。在vue.js中，它其实是进行了异步的更新操作。当前这种情况下，我们是无法在modify的操作中，获取更新之后的值。所以，针对这种情况，vue.js提供了一个nextTick的回调方法。
可以修改代码如下：
