Vue工作原理小结

本文能帮你做什么&＃xff1f;
1、了解vue的双向数据绑定原理以及核心代码模块
2、缓解好奇心的同时了解如何实现双向绑定
为了便于说明原理与实现&＃xff0c;本文相关代码主要摘自vue源码, 并进行了简化改造&＃xff0c;相对较简陋&＃xff0c;并未考虑到数组的处理、数据的循环依赖等&＃xff0c;也难免存在一些问题&＃xff0c;欢迎大家指正。不过这些并不会影响大家的阅读和理解&＃xff0c;相信看完本文后对大家在阅读vue源码的时候会更有帮助<
本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm

相信大家对mvvm双向绑定应该都不陌生了&＃xff0c;一言不合上代码&＃xff0c;下面先看一个本文最终实现的效果吧&＃xff0c;和vue一样的语法&＃xff0c;如果还不了解双向绑定&＃xff0c;猛戳Google

<div id&＃61;"mvvm-app"> <input type&＃61;"text" v-model&＃61;"word"> <p>{{word}}p> <button v-on:click&＃61;"sayHi">change modelbutton> div> <script src&＃61;"./js/observer.js">script> <script src&＃61;"./js/watcher.js">script> <script src&＃61;"./js/compile.js">script> <script src&＃61;"./js/mvvm.js">script> <script> var vm &＃61; new MVVM({ el: &＃39;#mvvm-app&＃39;, data: { word: &＃39;Hello World!&＃39; }, methods: { sayHi: function() { this.word &＃61; &＃39;Hi, everybody!&＃39;; } } }); script>

效果&＃xff1a;

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定&＃xff0c;而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素&＃xff08;input、textare等&＃xff09;添加了change(input)事件&＃xff0c;来动态修改model和 view&＃xff0c;并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种&＃xff1a;

发布者-订阅者模式&＃xff08;backbone.js&＃xff09;

脏值检查&＃xff08;angular.js&＃xff09;

数据劫持&＃xff08;vue.js&＃xff09;

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听&＃xff0c;更新数据方式通常做法是 vm.set(&＃39;property&＃39;, value)&＃xff0c;这里有篇文章讲的比较详细&＃xff0c;有兴趣可点这里

这种方式现在毕竟太low了&＃xff0c;我们更希望通过 vm.property &＃61; value 这种方式更新数据&＃xff0c;同时自动更新视图&＃xff0c;于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更&＃xff0c;来决定是否更新视图&＃xff0c;最简单的方式就是通过 setInterval() 定时轮询检测数据变动&＃xff0c;当然Google不会这么low&＃xff0c;angular只有在指定的事件触发时进入脏值检测&＃xff0c;大致如下&＃xff1a;

• DOM事件&＃xff0c;譬如用户输入文本&＃xff0c;点击按钮等。( ng-click )

• XHR响应事件 ( $http )

• 浏览器Location变更事件 ( $location )

• Timer事件( $timeout , $interval )

• 执行 $digest() 或 $apply()

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

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的&＃xff0c;其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持&＃xff0c;达到监听数据变动的目的&＃xff0c;无疑这个方法是本文中最重要、最基础的内容之一&＃xff0c;如果不熟悉defineProperty&＃xff0c;猛戳这里
整理了一下&＃xff0c;要实现mvvm的双向绑定&＃xff0c;就必须要实现以下几点&＃xff1a;
1、实现一个数据监听器Observer&＃xff0c;能够对数据对象的所有属性进行监听&＃xff0c;如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile&＃xff0c;对每个元素节点的指令进行扫描和解析&＃xff0c;根据指令模板替换数据&＃xff0c;以及绑定相应的更新函数
3、实现一个Watcher&＃xff0c;作为连接Observer和Compile的桥梁&＃xff0c;能够订阅并收到每个属性变动的通知&＃xff0c;执行指令绑定的相应回调函数&＃xff0c;从而更新视图
4、mvvm入口函数&＃xff0c;整合以上三者

上述流程如图所示&＃xff1a;

1、实现Observer

ok, 思路已经整理完毕&＃xff0c;也已经比较明确相关逻辑和模块功能了&＃xff0c;let&＃39;s do it
我们知道可以利用Obeject.defineProperty()来监听属性变动
那么将需要observe的数据对象进行递归遍历&＃xff0c;包括子属性对象的属性&＃xff0c;都加上 setter和getter
这样的话&＃xff0c;给这个对象的某个值赋值&＃xff0c;就会触发setter&＃xff0c;那么就能监听到了数据变化。。相关代码可以是这样&＃xff1a;

var data &＃61; {name: &＃39;kindeng&＃39;};
observe(data);
data.name &＃61; &＃39;dmq&＃39;; // 哈哈哈&＃xff0c;监听到值变化了 kindeng --> dmq function observe(data) { if (!data || typeof data !&＃61;&＃61; &＃39;object&＃39;) { 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(&＃39;哈哈哈&＃xff0c;监听到值变化了 &＃39;, val, &＃39; --> &＃39;, newVal); val &＃61; newVal; } }); }

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

// ... 省略
function defineReactive(data, key, val) { var dep &＃61; new Dep(); observe(val); // 监听子属性 Object.defineProperty(data, key, { // ... 省略 set: function(newVal) { if (val &＃61;&＃61;&＃61; newVal) return; console.log(&＃39;哈哈哈&＃xff0c;监听到值变化了 &＃39;, val, &＃39; --> &＃39;, newVal); val &＃61; newVal; dep.notify(); // 通知所有订阅者 } }); } function Dep() { this.subs &＃61; []; } Dep.prototype &＃61; { addSub: function(sub) { this.subs.push(sub); }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } };

那么问题来了&＃xff0c;谁是订阅者&＃xff1f;怎么往订阅器添加订阅者&＃xff1f;
没错&＃xff0c;上面的思路整理中我们已经明确订阅者应该是Watcher, 而且var dep &＃61; new Dep();是在 defineReactive方法内部定义的&＃xff0c;所以想通过dep添加订阅者&＃xff0c;就必须要在闭包内操作&＃xff0c;所以我们可以在 getter里面动手脚&＃xff1a;

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

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

2、实现Compile

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

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

function Compile(el) {this.$el &＃61; this.isElementNode(el) ? el : document.querySelector(el);if (this.$el) {this.$fragment &＃61; this.node2Fragment(this.$el); this.init(); this.$el.appendChild(this.$fragment); } } Compile.prototype &＃61; { init: function() { this.compileElement(this.$fragment); }, node2Fragment: function(el) { var fragment &＃61; document.createDocumentFragment(), child; // 将原生节点拷贝到fragment while (child &＃61; el.firstChild) { fragment.appendChild(child); } return fragment; } };

compileElement方法将遍历所有节点及其子节点&＃xff0c;进行扫描解析编译&＃xff0c;调用对应的指令渲染函数进行数据渲染&＃xff0c;并调用对应的指令更新函数进行绑定&＃xff0c;详看代码及注释说明&＃xff1a;

Compile.prototype &＃61; {// ... 省略compileElement: function(el) {var childNodes &＃61; el.childNodes, me &＃61; this;[].slice.call(childNodes).forEach(function(node) {var text &＃61; node.textContent;var reg &＃61; /\{\{(.*)\}\}/; // 表达式文本// 按元素节点方式编译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 &＃61; node.attributes, me &＃61; this; [].slice.call(nodeAttrs).forEach(function(attr) { // 规定&＃xff1a;指令以 v-xxx 命名 // 如 中指令为 v-text var attrName &＃61; attr.name; // v-text if (me.isDirective(attrName)) { var exp &＃61; attr.value; // content var dir &＃61; 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 &＃61; { text: function(node, vm, exp) { this.bind(node, vm, exp, &＃39;text&＃39;); }, // ...省略 bind: function(node, vm, exp, dir) { var updaterFn &＃61; updater[dir &＃43; &＃39;Updater&＃39;]; // 第一次初始化视图 updaterFn && updaterFn(node, vm[exp]); // 实例化订阅者&＃xff0c;此操作会在对应的属性消息订阅器中添加了该订阅者watcher new Watcher(vm, exp, function(value, oldValue) { // 一旦属性值有变化&＃xff0c;会收到通知执行此更新函数&＃xff0c;更新视图 updaterFn && updaterFn(node, value, oldValue); }); } }; // 更新函数 var updater &＃61; { textUpdater: function(node, value) { node.textContent &＃61; typeof value &＃61;&＃61; &＃39;undefined&＃39; ? &＃39;&＃39; : value; } // ...省略 };

这里通过递归遍历保证了每个节点及子节点都会解析编译到&＃xff0c;包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记&＃xff0c;如中v-text便是指令&＃xff0c;而other-attr不是指令&＃xff0c;只是普通的属性。
监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中&＃xff0c;通过new Watcher()添加回调来接收数据变化的通知