• 仿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

    本人前端水平有限,写的知识点可能有谬误,欢迎留言指正,如果看到,我将第一时间回复。感谢支持!
  • 相关阅读:
    使用eNSP配置灵活QinQ
    使用eNSP配置端口QinQ
    python-多线程编程
    front-end plugin, generate pdf with html5 and jquery
    dotnetnuke peek. glance.
    a
    租房了,说一个奇妙的事情。
    总是容易忘记zen coding里怎么写标签text, mark一下吧
    springboot+druid连接池及监控配置
    springboot +mybatis分页插件PageHelper
  • 原文地址:https://www.cnblogs.com/qddyh/p/14633572.html
Copyright © 2020-2023  润新知