理解VUE双向数据绑定原理和实现
一、原理:
1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
2.核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法;
3.介绍一下Object.defineProperty()方法
(1)Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的属性) descriptor (具体的改变方法)
(2)简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;
set,get方法初步了解
二、先简单的实现一个js的双向数据绑定来熟悉一下这个方法:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><input type="text" id="a"><span id="b"></span></div>
</body>
<script>var obj = {}; //定义一个空对象var val = 'zhao'; //赋予初始值Object.defineProperty(obj, 'val', {//定义要修改对象的属性get: function () {return val;},set: function (newVal) { val = newVal;//定义val等于修改后的内容document.getElementById('a').value = val;//让文本框的内容等于valdocument.getElementById('b').innerHTML = val;//让span的内容等于val}});document.addEventListener('keyup', function (e) {//当在文本框输入内容时让对象里你定义的val等于文本框的值obj.val = e.target.value;})</script></html>
这样我们就能实现js的双向数据绑定,也对这个方法有初步的了解;
这个例子实现的效果是:随着文本框输入文字的变化,span中会同步显示相同的文字内容;这样就实现了 model => view 以及 view => model 的双向绑定。
通过添加事件监听keyup来触发set方法,而set再修改了访问器属性的同时,也修改了dom样式,改变了span标签内的文本。
三、实现一个真正的双向绑定的原理
1.实现效果
先来看一下vue双向数据绑定是如何进行的,以便我们确定好思考方向
image
image
2.任务拆分
拆分任务可以让我们的思路更加清晰:
(1)将vue中的data中的内容绑定到输入文本框和文本节点中
(2)当文本框的内容改变时,vue实例中的data也同时发生改变
(3)当data中的内容发生改变时,输入框及文本节点的内容也发生变化
3.开始任务1——绑定内容
我们先了解一下 DocuemntFragment(碎片化文档)这个概念,你可以把他认为一个dom节点收容器,当你创造了10个节点,当每个节点都插入到文档当中都会引发一次浏览器的回流,也就是说浏览器要回流10次,十分消耗资源。
而使用碎片化文档,也就是说我把10个节点都先放入到一个容器当中,最后我再把容器直接插入到文档就可以了!浏览器只回流了1次。
注意:还有一个很重要的特性是,如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。
举个例子:
可以看到,我的app中有两个子节点,一个元素节点,一个文本节点
但是,当我通过DocumentFragment 劫持数据一下后
注意:我的碎片化文档是将子节点都劫持了过来,而我的id为app的div内已经没有内容了。
同时要主要我while的判断条件。判断是否有子节点,因为我每次appendChild都把node中的第一个子节点劫持走了,node中就会少一个,直到没有的时候,child也就变成了undefined,也就终止了循环。
来实现内容绑定
我们要考虑两个问题,一个是如何绑定要input上,另一个是如何绑定要文本节点中。
这样思路就来了,我们已经获取到了div的所以子节点了,就在DocumentFragment里面,然后对每一个节点进行处理,看是不是有跟vm实例中有关联的内容,如果有,修改这个节点的内容。然后重新添加入DocumentFragment中。
首先,我们写一个处理每一个节点的函数,如果有input绑定v-model属性或者有{{ xxx }}的文本节点出现,就进行内容替换,替换为vm实例中的data中的内容
然后,在向碎片化文档中添加节点时,每个节点都处理一下。
创建Vue的实例化函数
效果图如下:
我们成功将内容都绑定到了输入框与文本节点上!
4、实现任务2——【view => model
对于此任务,我们从输入框考虑,输入框的问题,输入框如何改变data。我们通过事件监听器keyup,input等,来获取到最新的value,然后通过Object.defineProperty将获取的最新的value,赋值给实例vm的text,我们把vm实例中的data下的text通过Object.defineProperty设置为访问器属性,这样给vm.text赋值,就触发了set。set函数的作用一个是更新data中的text,另一个等到任务三再说。
首先实现一个响应式监听属性的函数。一旦有赋新值就发生变化
然后,实现一个观察者,对于一个实例 每一个属性值都进行观察。
改写编译函数,注意由于改成了访问器属性,访问的方法也产生变化,同时添加了事件监听器,把实例的text值随时更新
实例函数中,观察data中的所有属性值,注意增添了observe
最终我们改变input中的内容能改变data中的数据,单页面却没有刷新
4、实现任务3——【model => view】
通过修改vm实例的属性 该改变输入框的内容 与 文本节点的内容。
这里涉及到一个问题 需要我们注意,当我们修改输入框,改变了vm实例的属性,这是1对1的。
但是,我们可能在页面中多处用到 data中的属性,这是1对多的。也就是说,改变1个model的值可以改变多个view中的值。
这就需要我们引入一个新的知识点:
订阅/发布者模式
订阅发布模式(又称观察者模式)定义了一种一对多的关系,让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
1
举个例子:
之前提到的set函数的第二个作用 就是来提醒订阅者 进行noticy操作,告诉他们:“我的text变了!” 文本节点变成了订阅者,接到消息后,立马进行update操作
回顾一下,每当 new 一个 Vue,主要做了两件事:第一个是监听数据:observe(data),第二个是编译 HTML:nodeToFragement(id)。
在监听数据的过程中,我们会为 data 中的每一个属性生成一个主题对象 dep。
在编译 HTML 的过程中,会为每个与数据绑定相关的节点生成一个订阅者 watcher,watcher 会将自己添加到相应属性的 dep 容器中。
我们已经实现:修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。
接下来我们要实现的是:发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。
这里的关键逻辑是:如何将 watcher 添加到关联属性的 dep 中。
注意: 我把直接赋值的操作改为了 添加一个 Watcher 订阅者
那么,Watcher又该做些什么呢?
首先,将自己赋给了一个全局变量 Dep.target;
其次,执行了 update 方法,进而执行了 get 方法,get 的方法读取了 vm 的访问器属性,从而触发了访问器属性的 get 方法,get 方法中将该 watcher 添加到了对应访问器属性的 dep 中;
再次,获取属性的值,然后更新视图。
最后,将 Dep.target 设为空。因为它是全局变量,也是 watcher 与 dep 关联的唯一桥梁,任何时刻都必须保证 Dep.target 只有一个值。
最终我们就实现了这个双向数据绑定功能,虽然很繁琐,但我相信,你多打几遍,一定会对你有所帮助,加油吧!!
最后给大家附上源码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><input type="text" v-model="text" /> {{text}}</div></body><script type="text/javascript">// 编译函数function compile(node, vm) {var reg = /\{\{(.*)\}\}/; // 来匹配{{xxx}}中的xxx//如果是元素节点if(node.nodeType === 1) {var attr = node.attributes;//解析元素节点的所有属性for(let i = 0; i < attr.length; i++) {if(attr[i].nodeName == 'v-model') {var name = attr[i].nodeValue //看看是与哪一个数据相关node.addEventListener('input', function(e) { //将与其相关的数据改为最新值vm[name] = e.target.value})node.value = vm.data[name]; //将data中的值赋予给该nodenode.removeAttribute('v-model')}}}//如果是文本节点if(node.nodeType === 3) {if(reg.test(node.nodeValue)) {var name = RegExp.$1; //获取到匹配的字符串name = name.trim();// node.nodeValue = vm[name]; //将data中的值赋予给该nodenew Watcher(vm, node, name) //绑定一个订阅者}}}// 在向碎片化文档中添加节点时,每个节点都处理一下function nodeToFragment(node, vm) {var fragment = document.createDocumentFragment();var child;while(child = node.firstChild) {compile(child, vm);fragment.appendChild(child);}return fragment}// Vue构造函数 // 观察data中的所有属性值,注意增添了observefunction Vue(options) {this.data = options.data;observe(this.data, this)var id = options.el;var dom = nodeToFragment(document.getElementById(id), this)//处理完所有节点后,重新把内容添加回去document.getElementById(id).appendChild(dom)}// 实现一个响应式监听属性的函数。一旦有赋新值就发生变化 function defineReactive(obj, key, val) {var dep = new Dep();Object.defineProperty(obj, key, {get: function() {if(Dep.target) {dep.addSub(Dep.target)}return val},set: function(newVal) {if(newVal === val) {return}val = newVal;console.log('新值' + val);//一旦更新立马通知dep.notify();}})}// 实现一个观察者,对于一个实例 每一个属性值都进行观察。function observe(obj, vm) {for(let key of Object.keys(obj)) {defineReactive(vm, key, obj[key]);}}// Watcher监听者function Watcher(vm, node, name) {Dep.target = this;this.vm = vm;this.node = node;this.name = name;this.update();Dep.target = null;}Watcher.prototype = {update() {this.get();this.node.nodeValue = this.value //更改节点内容的关键},get() {this.value = this.vm[this.name] //触发相应的get}}// dep构造函数function Dep() {this.subs = []}Dep.prototype = {addSub(sub) {this.subs.push(sub)},notify() {this.subs.forEach(function(sub) {sub.update();})}}var vm = new Vue({el: 'app',data: {text: '赵刚'}})</script></html>
理解VUE双向数据绑定原理和实现相关推荐
- vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析 摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
- vue双向数据绑定原理 1
1. 原理 1.1 vue双向数据绑定原理,又称vue响应式原理,是vue的核心,双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化 ...
- Vue 双向数据绑定原理
原理 1.vue双向数据绑定原理,又称vue响应式原理,是vue的核心,双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的,通过Object.defineProperty()来劫持各个属性的 ...
- 分析Vue双向数据绑定原理以及简单实现MVVM
前言 随着Vue的火热发展,越来越多的程序员并不满足于对框架的使用,更多地追求其内在的原理,就像不能沉沦于美丽的外表,更应该追求灵魂的高度. 正文 好了,废话不多说,接下来我们将通过俩方面开展我们对外 ...
- 前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题 盒子模型 盒子水平垂直居中的方案 经典布局方案 圣杯布局 双飞翼布局 flex布局 定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
- “别具一格”的vue双向数据绑定原理
背景和一点点看法 见网上许多文章讲vue双向数据绑定一开口就大谈 Object.defineProperty 和 proxy.其实不然.这是vue中响应式的"基石". vue 中有 ...
- vue双向数据绑定原理学习
vue源码 1.双向数据绑定 学习数组的reduce函数 var arr = [2,4,5,67,78,5,1] // arr.reduce(函数,初始值) // arr.reduce((上次的初始值 ...
- 理解VUE2双向数据绑定原理和实现
vue实现数据双向绑定主要是通过 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter方法:在数据变动时发布消息给订阅 ...
- vue双向数据绑定原理
什么是双向数据绑定?Vue是一个MVVM框架,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 实现数据绑定的方式大致有以下几种: - 1.发布者-订阅者 ...
最新文章
- 工具用途_机械加工中研磨加工刀具(砂轮)﹑治工具及其用途
- 莫言:不要在不喜欢你的人那丢掉快乐
- Python PIL.Image和OpenCV图像格式相互转换
- 2019-12-03 有用的学术网站
- SQLServer2008快速清理日志文件
- Windows下 Apache+PHP5+MYSQL5+phpmyadmin 规范安装
- 在CISCO ASA 防火墙上配置Web ×××
- 枚举对象注释_如何以及何时使用枚举和注释
- 短程调度 中程调度 长程调度
- C# visionpro搜索区域拖动改变事件
- 从零实现深度学习框架——理解广播和常见的乘法
- java.io.File 的一些记录
- linux python3 装pip,linux 安装pip 和python3(示例代码)
- Python的学习心得和知识总结(十二)|Python图形用户接口编程(Graphical User Interface编程 一)
- php如何计算天数,php计算日期相差天数二种方法
- ​程序员如何挣外快?
- 文本分类——KNN算法
- LSA / LSI 算法
- 对应届毕业生参加面试的一些建议
- Jenkins - DingTalk