深入理解vue.js双向绑定的实现原理
前言大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的。先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例。 一、访问器属性访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 // 为obj定义一个名为hello的访问器属性
Object.defineProperty(obj,"hello",{ get: function () {return sth},set: function (val) {/ do sth /} })
访问器属性的"值"比较特殊,读取或设置访问器属性的值,实际上是调用其内部特性:
二、极简双向绑定的实现此例实现的效果是:随文本框输入文字的变化,span中会同步显示相同的文字内容;在js或控制台显式的修改 以上就是Vue实现双向绑定的基本原理。 三、分解任务上述示例仅仅是为了说明原理。 我们最终要实现的是: 首先将该任务分成几个子任务: 1、输入框以及文本节点与data中的数据绑定 2、输入框内容变化时,data中的数据同步变化。即 3、data中的数据变化时,文本节点的内容同步变化。即 要实现任务一,需要对DOM进行编译,这里有一个知识点:DocumentFragment。 四、DocumentFragmentDocumentFragment(文档片段)可以看作节点容器,它可以包含多个子节点,当我们将它插入到DOM中时,只有它的子节点会插入目标节点,所以把它看作一组节点的容器。使用DocumentFragment处理节点,速度和性能远远优于直接操作DOM。Vue进行编译时,就是将挂载目标的所有子节点劫持(真的是劫持)到DocumentFragment中,经过一番处理后,再将DocumentFragment整体返回插入挂载目标。 五、数据初始化绑定以上代码实现了任务一,我们可以看到,hello world已经呈现在输入框和文本节点中。 六、响应式的数据绑定再来看任务二的实现思路:当我们在输入框输入数据的时候,首先触发 在 任务二也就完成了,text属性值会与输入框的内容同步变化: 七、订阅/发布模式(subscribe&publish)text属性变化了, 订阅发布模式(又称观察者模式)定义了一种一对多的关系,让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察者对象。 发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作 之前提到的,当 八、双向绑定的实现回顾一下,每当 在监听数据的过程中,会为data中的每一个属性生成一个主题对象dep。 在编译HTML的过程中,会为每个与数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。 我们已经实现:修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 接下来我们要实现的是:发出通知 这里的关键逻辑是:如何将watcher添加到关联属性的dep中。 在编译HTML过程中,为每个与data关联的节点生成一个Watcher。Watcher函数中发生了什么呢? 首先,将自己赋给了一个全局变量 其次,执行了 再次,获取属性的值,然后更新视图。 最后,将 至此,hello world双向绑定就基本实现了。文本内容会随输入框内容同步变化,在控制器中修改 完整代码:https://github.com/bison1994/two-way-data-binding 总结以上就是关于vue.js双向绑定实现原理的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |