Vue数据双向绑定原理及简单实现方法


Posted in Javascript onMay 18, 2018

Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码.

一、示例

var vm = new Vue({ 
data: { obj: { a: 1 
} }, 
created: function () 
{ console.log(this.obj); 
} });

Vue数据双向绑定原理及简单实现方法

二、实现原理

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

1)数据劫持、vue是通过Object.defineProperty()来实现数据劫持,其中会有getter()和setter方法;当读取属性值时,就会触发getter()方法,在view中如果数据发生了变化,就会通过Object.defineProperty( )对属性设置一个setter函数,当数据改变了就会来触发这个函数;

三、实现步骤

1、实现Observer

ok, 思路已经整理完毕,也已经比较明确相关逻辑和模块功能了,let's do it

我们知道可以利用Obeject.defineProperty()来监听属性变动

那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter

这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。相关代码可以是这样:

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈,监听到值变化了 kindeng --> dmq
function observe(data) {
 if (!data || typeof data !== 'object') {
  return;
 }
 // 取出所有属性遍历
 Object.keys(data).forEach(function(key) {
  defineReactive(data, key, data[key]);
 });
};
function defineReactive(data, key, val) {
 observe(val); // 监听子属性
 Object.defineProperty(data, key, {
  enumerable: true, // 可枚举
  configurable: false, // 不能再define
  get: function() {
   return val;
  },
  set: function(newVal) {
   console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
   val = newVal;
  }
 });
}

这样我们已经可以监听每个数据的变化了,那么监听到变化之后就是怎么通知订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法,代码改善之后是这样:

// ... 省略
function defineReactive(data, key, val) {
 var dep = new Dep();
 observe(val); // 监听子属性

 Object.defineProperty(data, key, {
  // ... 省略
  set: function(newVal) {
   if (val === newVal) return;
   console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
   val = newVal;
   dep.notify(); // 通知所有订阅者
  }
 });
}
function Dep() {
 this.subs = [];
}
Dep.prototype = {
 addSub: function(sub) {
  this.subs.push(sub);
 },
 notify: function() {
  this.subs.forEach(function(sub) {
   sub.update();
  });
 }
};

那么问题来了,谁是订阅者?怎么往订阅器添加订阅者?

没错,上面的思路整理中我们已经明确订阅者应该是Watcher, 而且var dep = new Dep();是在 defineReactive方法内部定义的,所以想通过dep添加订阅者,就必须要在闭包内操作,所以我们可以在 getter里面动手脚:

// Observer.js
// ...省略
Object.defineProperty(data, key, {
 get: function() {
  // 由于需要在闭包内添加watcher,所以通过Dep定义一个全局target属性,暂存watcher, 添加完移除
  Dep.target && dep.addDep(Dep.target);
  return val;
 }
 // ... 省略
});
// Watcher.js
Watcher.prototype = {
 get: function(key) {
  Dep.target = this;
  this.value = data[key]; // 这里会触发属性的getter,从而添加订阅者
  Dep.target = null;
 }
}

这里已经实现了一个Observer了,已经具备了监听数据和数据变化通知订阅者的功能,完整代码。那么接下来就是实现Compile了

2、实现Compile

compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图,如图所示:

图片描述

因为遍历解析的过程有多次操作dom节点,为提高性能和效率,会先将跟节点el转换成文档碎片fragment进行解析编译操作,解析完成,再将fragment添加回原来的真实dom节点中

function Compile(el) {
 this.$el = this.isElementNode(el) ? el : document.querySelector(el);
 if (this.$el) {
  this.$fragment = this.node2Fragment(this.$el);
  this.init();
  this.$el.appendChild(this.$fragment);
 }
}
Compile.prototype = {
 init: function() { this.compileElement(this.$fragment); },
 node2Fragment: function(el) {
  var fragment = document.createDocumentFragment(), child;
  // 将原生节点拷贝到fragment
  while (child = el.firstChild) {
   fragment.appendChild(child);
  }
  return fragment;
 }
};
compileElement方法将遍历所有节点及其子节点,进行扫描解析编译,调用对应的指令渲染函数进行数据渲染,并调用对应的指令更新函数进行绑定,详看代码及注释说明:
Compile.prototype = {
 // ... 省略
 compileElement: function(el) {
  var childNodes = el.childNodes, me = this;
  [].slice.call(childNodes).forEach(function(node) {
   var text = node.textContent;
   var reg = /\{\{(.*)\}\}/; // 表达式文本
   // 按元素节点方式编译
   if (me.isElementNode(node)) {
    me.compile(node);
   } else if (me.isTextNode(node) && reg.test(text)) {
    me.compileText(node, RegExp.$1);
   }
   // 遍历编译子节点
   if (node.childNodes && node.childNodes.length) {
    me.compileElement(node);
   }
  });
 },
 compile: function(node) {
  var nodeAttrs = node.attributes, me = this;
  [].slice.call(nodeAttrs).forEach(function(attr) {
   // 规定:指令以 v-xxx 命名
   // 如 <span v-text="content"></span> 中指令为 v-text
   var attrName = attr.name; // v-text
   if (me.isDirective(attrName)) {
    var exp = attr.value; // content
    var dir = attrName.substring(2); // text
    if (me.isEventDirective(dir)) {
     // 事件指令, 如 v-on:click
     compileUtil.eventHandler(node, me.$vm, exp, dir);
    } else {
     // 普通指令
     compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
    }
   }
  });
 }
};
// 指令处理集合
var compileUtil = {
 text: function(node, vm, exp) {
  this.bind(node, vm, exp, 'text');
 },
 // ...省略
 bind: function(node, vm, exp, dir) {
  var updaterFn = updater[dir + 'Updater'];
  // 第一次初始化视图
  updaterFn && updaterFn(node, vm[exp]);
  // 实例化订阅者,此操作会在对应的属性消息订阅器中添加了该订阅者watcher
  new Watcher(vm, exp, function(value, oldValue) {
   // 一旦属性值有变化,会收到通知执行此更新函数,更新视图
   updaterFn && updaterFn(node, value, oldValue);
  });
 }
};
// 更新函数
var updater = {
 textUpdater: function(node, value) {
  node.textContent = typeof value == 'undefined' ? '' : value;
 }
 // ...省略
};

这里通过递归遍历保证了每个节点及子节点都会解析编译到,包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记,如<span v-text="content" other-attr中v-text便是指令,而other-attr不是指令,只是普通的属性。

监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中,通过new Watcher()添加回调来接收数据变化的通知

至此,一个简单的Compile就完成了,完整代码。接下来要看看Watcher这个订阅者的具体实现了

3、实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

如果有点乱,可以回顾下前面的思路整理

function Watcher(vm, exp, cb) {
 this.cb = cb;
 this.vm = vm;
 this.exp = exp;
 // 此处为了触发属性的getter,从而在dep添加自己,结合Observer更易理解
 this.value = this.get(); 
}
Watcher.prototype = {
 update: function() {
  this.run(); // 属性值变化收到通知
 },
 run: function() {
  var value = this.get(); // 取到最新值
  var oldVal = this.value;
  if (value !== oldVal) {
   this.value = value;
   this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调,更新视图
  }
 },
 get: function() {
  Dep.target = this; // 将当前订阅者指向自己
  var value = this.vm[exp]; // 触发getter,添加自己到属性订阅器中
  Dep.target = null; // 添加完毕,重置
  return value;
 }
};
// 这里再次列出Observer和Dep,方便理解
Object.defineProperty(data, key, {
 get: function() {
  // 由于需要在闭包内添加watcher,所以可以在Dep定义一个全局target属性,暂存watcher, 添加完移除
  Dep.target && dep.addDep(Dep.target);
  return val;
 }
 // ... 省略
});
Dep.prototype = {
 notify: function() {
  this.subs.forEach(function(sub) {
   sub.update(); // 调用订阅者的update方法,通知变化
  });
 }
};

实例化Watcher的时候,调用get()方法,通过Dep.target = watcherInstance标记订阅者是当前watcher实例,强行触发属性定义的getter方法,getter方法执行的时候,就会在属性的订阅器dep添加当前watcher实例,从而在属性值有变化的时候,watcherInstance就能收到更新通知。

四、简单实现方法

<body>
 <div id="app">
  <input type="text" id="txt">
  <p id="show-txt"></p>
 </div>
 <script>
  var obj = {}
  Object.defineProperty(obj, 'txt', {
   get: function () {
    return obj
   },
   set: function (newValue) {
    document.getElementById('txt').value = newValue
    document.getElementById('show-txt').innerHTML = newValue
   }
  })
  document.addEventListener('keyup', function (e) {
   obj.txt = e.target.value
  })
 </script>
</body>

总结

以上所述是小编给大家介绍的Vue数据双向绑定原理及简单实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 #Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
vue引用js文件的多种方式(推荐)
May 17 #Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
create-react-app修改为多页面支持的方法
May 17 #Javascript
You might like
实用函数7
2007/11/08 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP框架性能测试报告
2016/05/08 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
MooTools 1.2介绍
2009/09/14 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python常用内置函数总结
2015/02/08 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
国税会议欢迎词
2014/01/16 职场文书
客服部工作职责范本
2014/02/14 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
品牌服务方案
2014/06/03 职场文书
小学生校园广播稿
2014/09/28 职场文书
六五普法宣传标语
2014/10/06 职场文书
思想政治表现评语
2015/01/04 职场文书
2015年质检工作总结
2015/05/04 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android