vue2的响应式原理

Vue的响应式原理是用Object.definePrototy()的set与get结合观察者模式进行数据劫持；

首先了解一下Object.definePrototy()的set与get；

在获取对象prototy的时候，会自动调用get方法，在修改时会自动调用set方法

VUE给data里所有的属性加上set,get这个过程就叫做Reactive化。

观察者模式（发布订阅者模式）

观察者模式分为注册环节与发布环节

依赖dep类与watch类

这个Watcher实际上是连接Vue组件与Dep的桥梁。
每一个Watcher对应一个vue component。

原理：

结合官网的图解析：

组件初始化时会给每一个data属性都注册一个getter,setter,也是就reactive化；

然后再new一个自己的Watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM；

在调用render的时候需要用到data的属性值，此时会触发getter函数，将Watch函数进行注册；即依赖收集

当data属性发生改变时，会遍历所有的watch对象，notify它们去重新渲染组件！！

object里面如果是普通数据类型，直接return,若还包含其他对象或数组，会递归调用Object.definePrototy()

vue2的响应式问题

vue2中利用的Object.definePrototy()写的方法会遍历所有的watch对象，十分耗费性能，而且需要对数组额外处理，vue2中采用数组index下标直接修改数据是没有响应式的；直接修改长度也是没有响应式的；初始化中没有在data中的数据也不是响应式的，后续可以通过Object.definePrototy()来添加或者$set等详见官网

其实数组的可以实现响应式，但是早在github有人提问yyx就回答了，收益与付出不成正比！！

vue3采用了proxy去替代Object.definePrototy()，具体等学了vue3再补充！！！