仿VUE创建响应式数据

VUE对于前端开发人员都非常熟悉了，其工作原理估计也都能说的清个大概，具体代码的实现估计看的人不会太多，这里对vue响应式数据做个简单的实现。

先简单介绍一下VUE数据响应原理，VUE响应数据分为对象和数组，实现方式并不同。

对象的数据响应方式

使用Object.definePrototype()方式对数据劫持，当访问对象属性时会收集依赖，当有数据值发生改变时会触发收集到的依赖的回调方法。

数组的数据响应方式

使用的是重写能够改变数组的方法，比如（push、pop、unshift、shift、sort、reverse、splice）共七个，当被访问的值为数组时会额外再收集一套依赖，当有数据值发生改变时，即调用了改变数组的方法时会触发收集到的依赖的回调方法。看到这里也就明白了为什么使用形如：array[i] = value 的方式改变数组时页面不会更新了，因为这样并不会触发回调，只有使用了改变数组的方法才会触发回调。

项目目标：

数据发生改变，调用回调方法，并注入改变前和改变后的数据。

形如：watch('data', (new, old) => {console.log(new, old)})

监听data数据的变化，无论data是对象还是数组，如果有值发生改变均会调用cb方法。

具体代码详见：https://github.com/dongyinghao/reactive