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