仿VUE创建响应式数据

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

仿VUE创建响应式数据

孩子他爹   2021-04-08 我要评论

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们