Vue.js双向绑定实现原理详解


Posted in Javascript onDecember 22, 2016

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

参考文章:https://3water.com/article/100819.htm

一、访问器属性

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

var obj = { };

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

Object.defineProperty(obj, "hello", {

get: function () {return sth},

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

})

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

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

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

obj.hello = "abc" // 为属性赋值,就是调用set函数,赋值其实是传参

Vue.js双向绑定实现原理详解

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

二、极简双向绑定的实现

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事件(或者keyup、change事件),在相应的事件处理程序中,我们获取输入框的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双向绑定实现原理详解

至此,hello world双向绑定就基本实现了。文本内容会随输入框内容同步变化,在控制器中修改vm.text的值,会同步反映到文本内容中(但输入框还没有绑定,读者可以自己试试)。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 #Javascript
JS实现的简单轮播图运动效果示例
Dec 22 #Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 #Javascript
详解js的事件代理(委托)
Dec 22 #Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 #Javascript
vue双向绑定的简单实现
Dec 22 #Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 #Javascript
You might like
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP cron中的批处理
2008/09/16 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python中的pprint折腾记
2015/01/21 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
JAVA代码查错题
2014/10/10 面试题
Java基础类库面试题
2013/09/04 面试题
医学生自荐信范文
2013/12/03 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
小小的船教学反思
2014/02/21 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
公司食堂管理制度
2015/08/05 职场文书