浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享。最后想着之前一直想研究一下 vue 源码,今天刚好 “借此机会” 研究一下。 网上研究vue数据绑定的文章已经非常多了,但是自己写一遍,敲一遍demo和看别人的文章是完全不同的,so……搬运工来了 目前数据绑定主要有以下三种实现方式:1. 脏值检查(angular.js) 轮询检测数据变化 DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
2、Object.defineProperty劫持对象的get、set,从而实现对数据的监控。 (vue) 3、发布/订阅者模式实现数据与视图的自动同步 Object.defineProperty的优点
Object.defineProperty的用法由上面的例子看出,Object.defineProperty 传人3个参数 第一个: a对象 第二个: a对象里面的b属性 第三个: 属性比较多,列举有用的 value,set,get,configurable 数据绑定原理:1、实现一个数据监听器Observer,对数据对象的所有属性进行监听,如有变动则拿到最新值并通知 dep数组 2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据 3、实现一个dep数组 ,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,更新视图 1. 实现observer 2. 维护一个数组 3. compile最后,附上源码 github 参考链接: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |