Vue数据双向绑定原理实例解析


Posted in Javascript onMay 15, 2020

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的,首先是对数据进行监听,然后当监听的属性发生变化时则告诉订阅者是否要更新,若更新就会执行对应的更新函数从而更新视图

Vue数据双向绑定原理实例解析

MVC模式

以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新

Vue数据双向绑定原理实例解析

MVVM模式

MVVM模式就是Model?View?ViewModel模式。它实现了View的变动,自动反映在 ViewModel,反之亦然。对于双向绑定的理解,就是用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。再说细点,就是在单向绑定的基础上给可输入元素input、textare等添加了change(input)事件,(change事件触发,View的状态就被更新了)来动态修改model。

Vue数据双向绑定原理实例解析

双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令(如v-model,v-on)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。

因此接下去我们执行以下3个步骤,实现数据的双向绑定:

(1)实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

(2)实现一个订阅者Watcher,每一个Watcher都绑定一个更新函数,watcher可以收到属性的变化通知并执行相应的函数,从而更新视图。

(3)实现一个解析器Compile,可以扫描和解析每个节点的相关指令(v-model,v-on等指令),如果节点存在v-model,v-on等指令,则解析器Compile初始化这类节点的模板数据,使之可以显示在视图上,然后初始化相应的订阅者(Watcher)。

Vue数据双向绑定原理实例解析

实现一个Observer

Observer是一个数据监听器,其实现核心方法就是Object.defineProperty( )。如果要对所有属性都进行监听的话,那么可以通过递归方法遍历所有属性值,并对其进行Object.defineProperty( )处理
如下代码实现了一个Observer。

function Observer(data) {  this.data = data;  this.walk(data);
}
 
Observer.prototype = {  walk: function(data) {    
var self = this;    //这里是通过对一个对象进行遍历,对这个对象的所有属性都进行监听
 Object.keys(data).forEach(function(key) {
 self.defineReactive(data, key, data[key]);
 });
 },  defineReactive: function(data, key, val) {    
 var dep = new Dep();   // 递归遍历所有子属性
 var childObj = observe(val);    
 Object.defineProperty(data, key, {      
 enumerable: true,      
 configurable: true,      
 get: function getter () {        
 if (Dep.target) {         
 // 在这里添加一个订阅者
 console.log(Dep.target)
 dep.addSub(Dep.target);
 }        return val;
 },     
 // setter,如果对一个对象属性值改变,就会触发setter中的dep.notify(),
 通知watcher(订阅者)数据变更,执行对应订阅者的更新函数,来更新视图。
 set: function setter (newVal) {        
 if (newVal === val) {          
 return;
 }
 val = newVal;       
 // 新的值是object的话,进行监听
 childObj = observe(newVal);
 dep.notify();
 }
 });
 }
};function observe(value, vm) {  if (!value || typeof value !== 'object') {    
return;
 }  return new Observer(value);
};// 消息订阅器Dep,订阅器Dep主要负责收集订阅者,然后在属性变化的时候执行对应订阅者的更新函数
function Dep () {  
this.subs = [];
}
Dep.prototype = { /**
 * [订阅器添加订阅者]
 * @param {[Watcher]} sub [订阅者]
 */
 addSub: function(sub) {    
 this.subs.push(sub);
 }, // 通知订阅者数据变更
 notify: function() {    
 this.subs.forEach(function(sub) {
 sub.update();
 });
 }
};
Dep.target = null;

在Observer中,当初我看别人的源码时,我有一点不理解的地方就是Dep.target是从哪里来的,相信有些人和我会有同样的疑问。这里不着急,当写到Watcher的时候,你就会发现,这个Dep.target是来源于Watcher。

实现一个Watcher

Watcher就是一个订阅者。用于将Observer发来的update消息处理,执行Watcher绑定的更新函数。

如下代码实现了一个Watcher

function Watcher(vm, exp, cb) {  
this.cb = cb;  
this.vm = vm;  
this.exp = exp;  
this.value = this.get(); // 将自己添加到订阅器的操作}
 
Watcher.prototype = {  update: function() {    
this.run();
 },  run: function() {    
 var value = this.vm.data[this.exp];    
 var oldVal = this.value;    
 if (value !== oldVal) {      
 this.value = value;      
 this.cb.call(this.vm, value, oldVal);
 }
 },  get: function() {
 Dep.target = this; // 缓存自己
 var value = this.vm.data[this.exp] // 强制执行监听器里的get函数
 Dep.target = null; // 释放自己
 return value;
 }
};

在我研究代码的过程中,我觉得最复杂的就是理解这些函数的参数,后来在我输出了这些参数之后,函数的这些功能也容易理解了。vm,就是之后要写的SelfValue对象,相当于Vue中的new Vue的一个对象。exp是node节点的v-model或v-on:click等指令的属性值。

上面的代码中就可以看出来,在Watcher的getter函数中,Dep.target指向了自己,也就是Watcher对象。在getter函数中,

var value = this.vm.data[this.exp] // 强制执行监听器里的get函数。
这里获取vm.data[this.exp] 时,会调用Observer中Object.defineProperty中的get函数
get: function getter () {        
if (Dep.target) {         
// 在这里添加一个订阅者         
console.log(Dep.target)          
dep.addSub(Dep.target);        
}        
return val;      
},

从而把watcher添加到了订阅器中,也就解决了上面Dep.target是哪里来的这个问题。

实现一个Compile

Compile主要的作用是把new SelfVue 绑定的dom节点,(也就是el标签绑定的id)遍历该节点的所有子节点,找出其中所有的v-指令和" {{}} ".

(1)如果子节点含有v-指令,即是元素节点,则对这个元素添加监听事件。(如果是v-on,则node.addEventListener('click'),如果是v-model,则node.addEventListener('input'))。接着初始化模板元素,创建一个Watcher绑定这个元素节点。

(2)如果子节点是文本节点,即" {{ data }} ",则用正则表达式取出" {{ data }} "中的data,然后var initText = this.vm[exp],用initText去替代其中的data。实现一个MVVM

可以说MVVM是Observer,Compile以及Watcher的“boss”了,他需要安排给Observer,Compile以及Watche做的事情如下

(1)Observer实现对MVVM自身model数据劫持,监听数据的属性变更,并在变动时进行notify

(2)Compile实现指令解析,初始化视图,并订阅数据变化,绑定好更新函数

(3)Watcher一方面接收Observer通过dep传递过来的数据变化,一方面通知Compile进行view update。
最后,把这个MVVM抽象出来,就是vue中Vue的构造函数了,可以构造出一个vue实例。最后写一个html测试一下我们的功能

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>self-vue</title></head><style>
 #app {    
 text-align: center;
 }</style><body>
 <div id="app">
 <h2>{{title}}</h2>
 <input v-model="name">
 <h1>{{name}}</h1>
 <button v-on:click="clickMe">click me!</button>
 </div></body><script src="js/observer.js"></script>
 <script src="js/watcher.js"></script>
 <script src="js/compile.js"></script>
 <script src="js/mvvm.js"></script>
 <script type="text/javascript">
 var app = new SelfVue({    
 el: '#app',    
 data: {      
 title: 'hello world',      
 name: 'canfoo'
 },    
 methods: {      
 clickMe: function () {        
 this.title = 'hello world';
 }
 },    
 mounted: function () {      
 window.setTimeout(() => {        
 this.title = '你好';
 }, 1000);
 }
 });</script></html>

先执行mvvm中的new SelfVue(...),在mvvm.js中, 

observe(this.data);
new Compile(options.el, this);

先初始化一个监听器Observer,用于监听该对象data属性的值。

然后初始化一个解析器Compile,绑定这个节点,并解析其中的v-," {{}} "指令,(每一个指令对应一个Watcher)并初始化模板数

据以及初始化相应的订阅者,并把订阅者添加到订阅器中(Dep)。这样就实现双向绑定了。

如果v-model绑定的元素,

<input v-model="name"> 

即输入框的值发生变化,就会触发Compile中的

node.addEventListener('input', function(e) {      
var newValue = e.target.value;      
if (val === newValue) {        
return;
 }      
 self.vm[exp] = newValue;
 val = newValue;
 });

self.vm[exp] = newValue;这个语句会触发mvvm中SelfValue的setter,以及触发Observer对该对象name属性的监听,即Observer中的Object.defineProperty()中的setter。

setter中有通知订阅者的函数dep.notify,Watcher收到通知后就会执行绑定的更新函数。

最后的最后就是效果图啦:

Vue数据双向绑定原理实例解析

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

Javascript 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
JavaScript鼠标悬停事件用法解析
May 15 #Javascript
JavaScript enum枚举类型定义及使用方法
May 15 #Javascript
Vue如何基于es6导入外部js文件
May 15 #Javascript
JavaScript onclick事件使用方法详解
May 15 #Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 #Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
Node.js API详解之 dns模块用法实例分析
May 15 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
浅谈PHP中的
2016/04/23 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
JS动态调用方法名示例介绍
2013/12/18 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python操作excel的方法
2018/08/16 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Python 内存管理机制全面分析
2021/01/16 Python
10个顶级Python实用库推荐
2021/03/04 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
大学优秀班集体申报材料
2014/05/23 职场文书
青年文明号申报材料
2014/12/23 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
小马王观后感
2015/06/11 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers