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 自定义动画概述及示例
Mar 29 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python画微信表情符的实例代码
2019/10/09 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
python默认参数调用方法解析
2020/02/09 Python
python实现UDP协议下的文件传输
2020/03/20 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
法人委托书范本
2014/09/15 职场文书
孔繁森观后感
2015/06/10 职场文书