Vue 2.0双向绑定原理的实现方法


Posted in Javascript onOctober 23, 2019

Object.defineProperty方法

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

具体实现过程的代码如下:

1、定义构造函数

function Vue(option){
 this.$el = document.querySelector(option.el); //获取挂载节点
 this.$data = option.data;
 this.$methods = option.methods;
 this.deps = {}; //所有订阅者集合 目标格式(一对多的关系):{msg: [订阅者1, 订阅者2, 订阅者3], info: [订阅者1, 订阅者2]}
 this.observer(this.$data); //调用观察者
 this.compile(this.$el); //调用指令解析器
}

2、定义指令解析器

Vue.prototype.compile = function (el) {
 let nodes = el.children; //获取挂载节点的子节点
 for (var i = 0; i < nodes.length; i++) {
 var node = nodes[i];
 if (node.children.length) {
 this.compile(node) //递归获取子节点
 }
 if (node.hasAttribute('l-model')) { //当子节点存在l-model指令
 let attrVal = node.getAttribute('l-model'); //获取属性值
 node.addEventListener('input', (() => {
 this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者
 let thisNode = node;
 return () => {
  this.$data[attrVal] = thisNode.value //更新数据层的数据
 }
 })())
 }
 if (node.hasAttribute('l-html')) {
 let attrVal = node.getAttribute('l-html'); //获取属性值
 this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
 }
 if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
 let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //获取插值表达式内容
 this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
 }
 if (node.hasAttribute('l-on:click')) {
 let attrVal = node.getAttribute('l-on:click'); //获取事件触发的方法名
 node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //将this指向this.$data
 }
 }
}

3、定义观察者

Vue.prototype.observer = function(data){
 for(var key in data){
 (function(that){
 let val = data[key]; //每一个数据的属性值
 that.deps[key] = []; //初始化所有订阅者对象{msg: [订阅者], info: []}
 var watchers = that.deps[key];
 Object.defineProperty(data, key, { //数据劫持
 get: function(){
  return val;
 },
 set: function(newVal){ //设置值(说明有数据更新)
  if(val !== newVal){
  val = newVal;
  }
  // 通知订阅者
  watchers.forEach(watcher=>{
  watcher.update()
  })
 }
 })
 })(this)
 }
}

4、定义订阅者

function Watcher(el, attr, vm, attrVal) {
 this.el = el;
 this.attr = attr;
 this.vm = vm;
 this.val = attrVal;
 this.update(); //更新视图
}

5、更新视图

Watcher.prototype.update = function () {
 this.el[this.attr] = this.vm.$data[this.val]
}

以上代码定义在一个Vue.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>
 <script src="./vue.js"></script>
</head>
<body>
 <!--
 实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。就必须要实现以下几点:
 1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
 2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
 3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
 4、mvvm入口函数,整合以上三者
 -->
 <div id="app">
 <input type="text" l-model="msg" >
 <p l-html="msg"></p>
 <input type="text" l-model="info" >
 <p l-html="info"></p>
 <button l-on:click="clickMe">点我</button>
 <p>{{msg}}</p>
 </div>

 <script>
 var vm = new Vue({
 el: "#app",
 data: {
 msg: "恭喜发财",
 info: "好好学习, 天天向上"
 },
 methods: {
 clickMe(){
  this.msg = "我爱敲代码";
 }
 }
 })
 </script>
</body>
</html>

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
p5.js绘制旋转的正方形
Oct 23 #Javascript
p5.js实现简单货车运动动画
Oct 23 #Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 #Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 #Javascript
p5.js临摹旋转爱心
Oct 23 #Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 #Javascript
You might like
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python文件路径名的操作方法
2019/10/30 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
numpy实现RNN原理实现
2021/03/02 Python
市场策划求职信
2014/08/07 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
初中家长评语和期望
2014/12/26 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers