深入理解vue.js双向绑定的实现原理


Posted in Javascript onDecember 05, 2016

前言

大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的。先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例。

一、访问器属性

访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义。

var obj = { };

// 为obj定义一个名为hello的访问器属性

Object.defineProperty(obj, "hello", {

get: function () {return sth},

set: function (val) {/* do sth */}

})

obj.hello // 可以像普通属性一样读取访问器属性

访问器属性的"值"比较特殊,读取或设置访问器属性的值,实际上是调用其内部特性:getset函数。

obj.hello // 读取属性,就是调用get函数并返回get函数的返回值

obj.hello = "abc" // 为属性赋值,就是调用set函数,赋值其实是传参深入理解vue.js双向绑定的实现原理

getset方法内部的this都指向obj,这意味着getset函数可以操作对象内部的值。另外,访问器属性的会"覆盖"同名的普通属性,因为访问器属性会被优先访问,与其同名的普通属性则会被忽略(也就是所谓的被"劫持"了)。

二、极简双向绑定的实现

深入理解vue.js双向绑定的实现原理

此例实现的效果是:随文本框输入文字的变化,span中会同步显示相同的文字内容;在js或控制台显式的修改obj.name的值,视图会相应更新。这样就实现了model =>view以及view => model的双向绑定,并且是响应式的。

深入理解vue.js双向绑定的实现原理

以上就是Vue实现双向绑定的基本原理。

三、分解任务

上述示例仅仅是为了说明原理。

我们最终要实现的是:

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

首先将该任务分成几个子任务:

1、输入框以及文本节点与data中的数据绑定

2、输入框内容变化时,data中的数据同步变化。即view => model的变化。

3、data中的数据变化时,文本节点的内容同步变化。即model => view的变化。

要实现任务一,需要对DOM进行编译,这里有一个知识点:DocumentFragment。

四、DocumentFragment

DocumentFragment(文档片段)可以看作节点容器,它可以包含多个子节点,当我们将它插入到DOM中时,只有它的子节点会插入目标节点,所以把它看作一组节点的容器。使用DocumentFragment处理节点,速度和性能远远优于直接操作DOM。Vue进行编译时,就是将挂载目标的所有子节点劫持(真的是劫持)到DocumentFragment中,经过一番处理后,再将DocumentFragment整体返回插入挂载目标。

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

五、数据初始化绑定

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

以上代码实现了任务一,我们可以看到,hello world已经呈现在输入框和文本节点中。

深入理解vue.js双向绑定的实现原理

六、响应式的数据绑定

再来看任务二的实现思路:当我们在输入框输入数据的时候,首先触发input事件(或者keyupchange事件),在相应的事件处理程序中,我们获取输入框的value并赋值给vm实例的text属性。我们会利用defineProperty将data中的text劫持为vm的访问器属性,因此给vm.text赋值,就会触发set方法。

set方法中主要做两件事,第一是更新属性的值,第二留到任务三再说。

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

任务二也就完成了,text属性值会与输入框的内容同步变化:

深入理解vue.js双向绑定的实现原理

七、订阅/发布模式(subscribe&publish)

text属性变化了,set方法触发了,但是文本节点的内容没有变化。如何让同样绑定到text的文本节点也同步变化呢?这里又有一个知识点:订阅发布模式。

订阅发布模式(又称观察者模式)定义了一种一对多的关系,让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作

深入理解vue.js双向绑定的实现原理

之前提到的,当set方法触发后做的第二件事就是作为发布者发出通知:“我是属性text,我变了”。文本节点则是作为订阅者,在收到消息后执行相应的更新操作。

八、双向绑定的实现

回顾一下,每当new一个Vue,主要做了两件事:第一个是监听数据:observe(data) ,第二个是编译HTML:nodeToFragement(id)

在监听数据的过程中,会为data中的每一个属性生成一个主题对象dep。

在编译HTML的过程中,会为每个与数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。

我们已经实现:修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的set方法。

接下来我们要实现的是:发出通知dep.notify() => 触发订阅者的update方法 => 更新视图。

这里的关键逻辑是:如何将watcher添加到关联属性的dep中。

深入理解vue.js双向绑定的实现原理

在编译HTML过程中,为每个与data关联的节点生成一个Watcher。Watcher函数中发生了什么呢?

深入理解vue.js双向绑定的实现原理

首先,将自己赋给了一个全局变量Dep.target

其次,执行了update方法,进而执行了get方法,get的方法读取了vm的访问器属性,从而触发了访问器属性的get方法,get方法中将该watcher添加到了对应访问器属性的dep中;

再次,获取属性的值,然后更新视图。

最后,将Dep.target设为空。因为它是全局变量,也是watcher与dep关联的唯一桥梁,任何时刻都必须保证Dep.target只有一个值。

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

深入理解vue.js双向绑定的实现原理

至此,hello world双向绑定就基本实现了。文本内容会随输入框内容同步变化,在控制器中修改vm.text的值,会同步反映到文本内容中。

完整代码:https://github.com/bison1994/two-way-data-binding

总结

以上就是关于vue.js双向绑定实现原理的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
原生js实现无缝轮播图效果
Jan 28 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 #Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 #Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 #Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 #Javascript
解析预加载显示图片艺术
Dec 05 #Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 #Javascript
简单几步实现返回顶部效果
Dec 05 #Javascript
You might like
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
javascript调试说明
2010/06/07 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
再探JavaScript作用域
2014/09/24 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
express 项目分层实践详解
2018/12/10 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python Tkinter版学生管理系统
2019/02/20 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
python中添加模块导入路径的方法
2021/02/03 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
法国家具及室内配件店:home24
2017/01/21 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
.NET面试问题集
2015/12/08 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
教师简历自我评价
2014/02/03 职场文书
教育技术职业规划范文
2014/03/04 职场文书
担保书格式及范文
2014/04/01 职场文书
硕士生找工作求职信
2014/07/05 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
庆七一宣传标语
2014/10/08 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript