深入理解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 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
Node学习记录之cluster模块
May 31 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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
Terran剧情介绍
2020/03/14 星际争霸
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python 多线程实现检测服务器在线情况
2015/11/25 Python
浅谈python中set使用
2016/06/30 Python
python实现FTP服务器服务的方法
2017/04/11 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python3.9新特性详解
2020/10/10 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
最新个人职业生涯规划书
2014/01/22 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
关于环保的演讲稿
2014/05/10 职场文书
建筑横幅标语
2014/10/09 职场文书
师德承诺书2015
2015/04/28 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书