首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue.js动态数据绑定学习笔记

Posted in Javascript onMay 19, 2017

对于vue.js的动态数据绑定，经过反复地看源码和博客讲解，总算能够理解它的实现了，心累~ 分享一下学习成果，同时也算是做个记录。完整代码GitHub地址：https://github.com/hanrenguang/Dynamic-data-binding。也可以到仓库的 README 阅读本文，容我厚脸皮地求 star，求 follow。

整体思路

不知道有没有同学和我一样，看着vue的源码却不知从何开始，真叫人头大。硬生生地看了observer, watcher, compile这几部分的源码，只觉得一脸懵逼。最终，从这里得到启发，作者写得很好，值得一读。

关于动态数据绑定呢，需要搞定的是 Dep , Observer , Watcher , Compile 这几个类，他们之间有着各种联系，想要搞懂源码，就得先了解他们之间的联系。下面来理一理：

  • Observer 所做的就是劫持监听所有属性，当有变动时通知 Dep
  • Watcher 向 Dep 添加订阅，同时，属性有变化时，Observer 通知 Dep，Dep 则通知 Watcher
  • Watcher 得到通知后，调用回调函数更新视图
  • Compile 则是解析所绑定元素的 DOM 结构，对所有需要绑定的属性添加 Watcher 订阅

由此可以看出，当属性发生变化时，是由Observer -> Dep -> Watcher -> update view，Compile 在最开始解析 DOM 并添加 Watcher 订阅后就功成身退了。

从程序执行的顺序来看的话，即 new Vue({}) 之后，应该是这样的：先通过 Observer 劫持所有属性，然后 Compile 解析 DOM 结构，并添加 Watcher 订阅，再之后就是属性变化 -> Observer -> Dep -> Watcher -> update view，接下来就说说具体的实现。

从new一个实例开始谈起

网上的很多源码解读都是从 Observer 开始的，而我会从 new 一个MVVM实例开始，按照程序执行顺序去解释或许更容易理解。先来看一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test</title>
</head>
<body>
 <div class="test">
  <p>{{user.name}}</p>
  <p>{{user.age}}</p>
 </div>

 <script type="text/javascript" src="hue.js"></script>
 <script type="text/javascript">
  let vm = new Hue({
   el: '.test',
   data: {
    user: {
     name: 'Jack',
     age: '18'
    }
   }
  });
 </script>
</body>
</html>

接下来都将以其为例来分析。下面来看一个简略的 MVVM 的实现，在此将其命名为 hue。为了方便起见，为 data 属性设置了一个代理，通过 vm._data 来访问 data 的属性显得麻烦且冗余，通过代理，可以很好地解决这个问题，在注释中也有说明。添加完属性代理后，调用了一个 observe 函数，这一步做的就是 Observer 的属性劫持了，这一步具体怎么实现，暂时先不展开。先记住他为 data 的属性添加了 getter 和 setter。

function Hue(options) {
 this.$options = options || {};
 let data = this._data = this.$options.data,
  self = this;

 Object.keys(data).forEach(function(key) {
  self._proxyData(key);
 });

 observe(data);

 self.$compile = new Compile(self, options.el || document.body);
}

// 为 data 做了一个代理，
// 访问 vm.xxx 会触发 vm._data[xxx] 的getter，取得 vm._data[xxx] 的值，
// 为 vm.xxx 赋值则会触发 vm._data[xxx] 的setter
Hue.prototype._proxyData = function(key) {
 let self = this;
 Object.defineProperty(self, key, {
  configurable: false,
  enumerable: true,
  get: function proxyGetter() {
   return self._data[key];
  },
  set: function proxySetter(newVal) {
   self._data[key] = newVal;
  }
 });
};

再往下看，最后一步 new 了一个 Compile，下面我们就来讲讲 Compile。

Compile

new Compile(self, options.el || document.body) 这一行代码中，第一个参数是当前 Hue 实例，第二个参数是绑定的元素，在上面的示例中为class为 .test 的div。

关于 Compile，这里只实现最简单的 textContent 的绑定。而 Compile 的代码没什么难点，很轻易就能读懂，所做的就是解析 DOM，并添加 Watcher 订阅。关于 DOM 的解析，先将根节点 el 转换成文档碎片 fragment 进行解析编译操作，解析完成后，再将 fragment 添加回原来的真实 DOM 节点中。来看看这部分的代码：

function Compile(vm, el) {
 this.$vm = vm;
 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.node2Fragment = function(el) {
 let fragment = document.createDocumentFragment(),
  child;

 // 也许有同学不太理解这一步，不妨动手写个小例子观察一下他的行为
 while (child = el.firstChild) {
  fragment.appendChild(child);
 }

 return fragment;
};

Compile.prototype.init = function() {
 // 解析 fragment
 this.compileElement(this.$fragment);
};

以上面示例为例，此时若打印出 fragment，可观察到其包含两个p元素：

<p>{{user.name}}</p>
<p>{{user.age}}</p>

下一步就是解析 fragment，直接看代码及注释吧：

Compile.prototype.compileElement = function(el) {
 let childNodes = Array.from(el.childNodes),
  self = this;

 childNodes.forEach(function(node) {
  let text = node.textContent,
   reg = /\{\{(.*)\}\}/;

  // 若为 textNode 元素，且匹配 reg 正则
  // 在上例中会匹配 '{{user.name}}' 及 '{{user.age}}'
  if (self.isTextNode(node) && reg.test(text)) {
   // 解析 textContent，RegExp.$1 为匹配到的内容，在上例中为 'user.name' 及 'user.age'
   self.compileText(node, RegExp.$1);
  }

  // 递归
  if (node.childNodes && node.childNodes.length) {
   self.compileElement(node);
  }
 });
};

Compile.prototype.compileText = function(node, exp) {
 // this.$vm 即为 Hue 实例，exp 为正则匹配到的内容，即 'user.name' 或 'user.age'
 compileUtil.text(node, this.$vm, exp);
};

let compileUtil = {
 text: function(node, vm, exp) {
  this.bind(node, vm, exp, 'text');
 },

 bind: function(node, vm, exp, dir) {
  // 获取更新视图的回调函数
  let updaterFn = updater[dir + 'Updater'];

  // 先调用一次 updaterFn，更新视图
  updaterFn && updaterFn(node, this._getVMVal(vm, exp));

  // 添加 Watcher 订阅
  new Watcher(vm, exp, function(value, oldValue) {
   updaterFn && updaterFn(node, value, oldValue);
  });
 },

 // 根据 exp，获得其值，在上例中即 'vm.user.name' 或 'vm.user.age'
 _getVMVal: function(vm, exp) {
  let val = vm;
  exp = exp.trim().split('.');
  exp.forEach(function(k) {
   val = val[k];
  });
  return val;
 }
};

let updater = {
 // Watcher 订阅的回调函数
 // 在此即更新 node.textContent，即 update view
 textUpdater: function(node, value) {
  node.textContent = typeof value === 'undefined'
   ? ''
   : value;
 }
};

正如代码中所看到的，Compile 在解析到 {{xxx}} 后便添加了 xxx 属性的订阅，即 new Watcher(vm, exp, callback)。理解了这一步后，接下来就需要了解怎么实现相关属性的订阅了。先从 Observer 开始谈起。

Observer

从最简单的情况来考虑，即不考虑数组元素的变化。暂时先不考虑 Dep 与 Observer 的联系。先看看 Observer 构造函数：

function Observer(data) {
 this.data = data;
 this.walk(data);
}

Observer.prototype.walk = function(data) {
 const keys = Object.keys(data);
 // 遍历 data 的所有属性
 for (let i = 0; i < keys.length; i++) {
  // 调用 defineReactive 添加 getter 和 setter
  defineReactive(data, keys[i], data[keys[i]]);
 }
};

接下来通过 Object.defineProperty 方法给所有属性添加 getter 和 setter，就达到了我们的目的。属性有可能也是对象，因此需要对属性值进行递归调用。

function defineReactive(obj, key, val) {
 // 对属性值递归，对应属性值为对象的情况
 let childObj = observe(val);

 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function() {
   // 直接返回属性值
   return val;
  },
  set: function(newVal) {
   if (newVal === val) {
    return;
   }
   // 值发生变化时修改闭包中的 val，
   // 保证在触发 getter 时返回正确的值
   val = newVal;

   // 对新赋的值进行递归，防止赋的值为对象的情况
   childObj = observe(newVal);
  }
 });
}

最后补充上 observe 函数，也即 Hue 构造函数中调用的 observe 函数：

function observe(val) {
 // 若 val 是对象且非数组，则 new 一个 Observer 实例，val 作为参数
 // 简单点说：是对象就继续。
 if (!Array.isArray(val) && typeof val === "object") {
  return new Observer(val);
 }
}

这样一来就对 data 的所有子孙属性（不知有没有这种说法。。）都进行了“劫持”。显然到目前为止，这并没什么用，或者说如果只做到这里，那么和什么都不做没差别。于是 Dep 上场了。我认为理解 Dep 与 Observer 和 Watcher 之间的联系是最重要的，先来谈谈 Dep 在 Observer 里做了什么。

Observer & Dep

在每一次 defineReactive 函数被调用之后，都会在闭包中新建一个 Dep 实例，即 let dep = new Dep()。Dep 提供了一些方法，先来说说 notify 这个方法，它做了什么事？就是在属性值发生变化的时候通知 Dep，那么我们的代码可以增加如下：

function defineReactive(obj, key, val) {
 let childObj = observe(val);
 const dep = new Dep();

 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function() {
   return val;
  },
  set: function(newVal) {
   if (newVal === val) {
    return;
   }

   val = newVal;
   childObj = observe(newVal);

   // 发生变动
   dep.notify();
  }
 });
}

如果仅考虑 Observer 与 Dep 的联系，即有变动时通知 Dep，那么这里就算完了，然而在 vue.js 的源码中，我们还可以看到一段增加在 getter 中的代码：

// ...
get: function() {
 if (Dep.target) {
  dep.depend();
 }
 return val;
}
// ...

这个 depend 方法呢，它又做了啥？答案是为闭包中的 Dep 实例添加了一个 Watcher 的订阅，而 Dep.target 又是啥？他其实是一个 Watcher 实例，？？？一脸懵逼，先记住就好，先看一部份的 Dep 源码：

// 标识符，在 Watcher 中有用到，先不用管
let uid = 0;

function Dep() {
 this.id = uid++;
 this.subs = [];
}

Dep.prototype.depend = function() {
 // 这一步相当于做了这么一件事：this.subs.push(Dep.target)
 // 即添加了 Watcher 订阅，addDep 是 Watcher 的方法
 Dep.target.addDep(this);
};

// 通知更新
Dep.prototype.notify = function() {
 // this.subs 的每一项都为一个 Watcher 实例
 this.subs.forEach(function(sub) {
  // update 为 Watcher 的一个方法，更新视图
  // 没错，实际上这个方法最终会调用到 Compile 中的 updaterFn，
  // 也即 new Watcher(vm, exp, callback) 中的 callback
  sub.update();
 });
};

// 在 Watcher 中调用
Dep.prototype.addSub = function(sub) {
 this.subs.push(sub);
};

// 初始时引用为空
Dep.target = null;

也许看到这还是一脸懵逼，没关系，接着往下。大概有同学会疑惑，为什么要把添加 Watcher 订阅放在 getter 中，接下来我们来说说这 Watcher 和 Dep 的故事。

Watcher & Dep

先让我们回顾一下 Compile 做的事，解析 fragment，然后给相应属性添加订阅：new Watcher(vm, exp, cb)。new 了这个 Watcher 之后，Watcher 怎么办呢，就有了下面这样的对话：

Watcher：hey Dep，我需要订阅 exp 属性的变动。

Dep：这我可做不到，你得去找 exp 属性中的 dep，他能做到这件事。

Watcher：可是他在闭包中啊，我无法和他联系。

Dep：你拿到了整个 Hue 实例 vm，又知道属性 exp，你可以触发他的 getter 啊，你在 getter 里动些手脚不就行了。

Watcher：有道理，可是我得让 dep 知道是我订阅的啊，不然他通知不到我。

Dep：这个简单，我帮你，你每次触发 getter 前，把你的引用告诉 Dep.target 就行了。记得办完事后给 Dep.target 置空。

于是就有了上面 getter 中的代码：

// ...
get: function() {
 // 是否是 Watcher 触发的
 if (Dep.target) {
  // 是就添加进来
  dep.depend();
 }
 return val;
}
// ...

现在再回头看看 Dep 部分的代码，是不是好理解些了。如此一来， Watcher 需要做的事情就简单明了了：

function Watcher(vm, exp, cb) {
 this.$vm = vm;
 this.cb = cb;
 this.exp = exp;
 this.depIds = new Set();

 // 返回一个用于获取相应属性值的函数
 this.getter = parseGetter(exp.trim());

 // 调用 get 方法，触发 getter
 this.value = this.get();
}

Watcher.prototype.get = function() {
 const vm = this.$vm;
 // 将 Dep.target 指向当前 Watcher 实例
 Dep.target = this;
 // 触发 getter
 let value = this.getter.call(vm, vm);
 // Dep.target 置空
 Dep.target = null;
 return value;
};

Watcher.prototype.addDep = function(dep) {
 const id = dep.id;
 if (!this.depIds.has(id)) {
  // 添加订阅，相当于 dep.subs.push(this)
  dep.addSub(this);
  this.depIds.add(id);
 }
};

function parseGetter(exp) {
 if (/[^\w.$]/.test(exp)) {
  return;
 }

 let exps = exp.split(".");

 return function(obj) {
  for (let i = 0; i < exps.length; i++) {
   if (!obj)
    return;
   obj = obj[exps[i]];
  }
  return obj;
 };
}

最后还差一部分，即 Dep 通知变化后，Watcher 的处理，具体的函数调用流程是这样的：dep.notify() -> sub.update()，直接上代码：

Watcher.prototype.update = function() {
 this.run();
};

Watcher.prototype.run = function() {
 let value = this.get();
 let oldVal = this.value;

 if (value !== oldVal) {
  this.value = value;
  // 调用回调函数更新视图
  this.cb.call(this.$vm, value, oldVal);
 }
};

结语

到这就算写完了，本人水平有限，若有不足之处欢迎指出，一起探讨。

参考资料

https://github.com/DMQ/mvvm

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

vue.js动态数据绑定学习笔记

- Author -

coderhangg

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
JS实现多选框的操作
Jun 24 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 #Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 #Javascript
angularjs封装$http为factory的方法
May 18 #Javascript
bootstrap表单示例代码分享
May 18 #Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 #Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 #Javascript
微信小程序中input标签详解及简单实例
May 18 #Javascript
二维数组(2) 查找算法(1) 装饰器(1) translation(2) 分块(1) decorator(1) 读取(1) bs4(1) 网页解析(1) 循环(3)
You might like
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
js控制table合并具体实现
2014/02/20 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”
2015/03/05 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
js运动应用实例解析
2015/12/28 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python入门之后再看点什么好?
2018/03/05 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python configparser模块操作代码实例
2020/06/08 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
超市营业员求职简历的自我评价
2013/10/17 职场文书
电大毕业生自我鉴定
2013/11/10 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年调度员工作总结
2015/04/30 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
美德少年事迹材料（2016推荐版）
2016/02/25 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫