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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
来自qq的javascript面试题
Jul 24 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
django中的ajax组件教程详解
2018/10/18 PHP
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python 连接sqlite及简单操作
2017/06/30 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python取余运算符知识点详解
2019/06/27 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
法学专业自我鉴定
2014/02/05 职场文书
中学生自我评价范文
2015/03/03 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
期中考试后的感想
2015/08/07 职场文书
小学英语课教学反思
2016/02/15 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Docker部署Mysql8的实现步骤
2022/07/07 Servers