Vue实现道理的简便介绍
用了Vue也有两年时间了，不断以来都是只知其然，不知其所以然，为了能更好的使用Vue不被Vue所奴役，学习一下Vue底层的根本道理。
Vue官网有一段这样的介绍：当你把一个一般的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个没法shim的特性，这也就是为什么Vue不支撑 IE8 乃至更低版本阅读器。
通过这一段的介绍不难可以得出，Vue是通过Object.defineProperty对实例中的data数据做了挟持并且使用Object.defineProperty的getter/setter并对其停止处置之后完成了数据的与视图的同步。
<img src="http://www.runoob.com/wp-cont...;/>
这张图应当不会很生疏，熟知Vue的同学假如细心阅读过Vue文档的话应当都看到过。猜想一下Vue使用Object.defineProperty做为ViewModel，对数据停止挟持之后假如View和Model发生转变的话，就会通知其相对应援用的地方停止更新处置，完成视图的与数据的双向绑定。
下面举个例子：
html:
<div id="name"></div>
javaScript:
var obj = {};
Object.defineProperty(obj,"name",{
get() {
return document.querySelector("#name").innerHTML;
},
set(val) {
document.querySelector("#name").innerHTML = val;
}
})
obj.name = "Aaron";通过上面的代码使用Object.defineProperty对Obj对象中的name属性停止了挟持，一旦该属性发生了转变则会触发set函数施行，做出响应的操纵。
扯了这么多，详细说一下Vue实现的道理。
- 需要数据监听器
Observer，能够对数据对象的所有属性停止监听，如有变更可拿到最新值并通知订阅者。 - 需要指令解析器
Compile，对每个元素节点的指令停止扫描和解析，按照指令模板更换数据，乃至绑定响应的更新函数。 - 一个
Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变更的通知，施行指令绑定的响应回调函数，从而更新视图。 MVVM入口函数，整合以上三者，实现数据响应。
<img src="https://cn.vuejs.org/images/d...;/>
接下来的文章将沿着这个思绪一步一步向下停止，以便完成一个简便的Vue类，完成数据与视图的实时更新。
<div id="app">
<p>{{name}}</p>
<p q-text="name"></p>
<p>{{age}}</p>
<p>{{doubleAge}}</p>
<input type="text" q-model="name"/>
<button @click="changeName">点击</button>
<div q-html="html"></div>
</div>
<script>
new QVue({
el:"#app",
data:{
name:"I am test",
age:12,
html:"<button>这是一个后插入的按钮</button>"
},
created(){
console.log("开端吧,QVue");
setTimeout(() => {
this.name = "测试数据，更换了么";
},2000)
},
methods:{
changeName(){
this.name = "点击啦，改动吧";
this.age = 1000000;
}
}
})
</script>以上代码则是需要完成的功效，包管所有功效全部都能实现。
第一我们要思考的是，要创立一个Vue的类，该类接收的是一个options的对象，也就是我们在实例化Vue的时候需要传递的参数。
class QVue {
constructor(options){
// 缓存options对象数据
this.$options = options;
// 取出data数据，做数据响应
this.$data = options.data || {};
}
}通过上面的代码可以看出了，为什么我们可以在Vue实例上通过this.$data拿到我们所写的data数据。
对数据已经停止了缓存之后，接下来要做的事情就是对数据停止视察，到达数据转变之后能够做出对虚拟Dom的操纵。
class QVue {
constructor(options){
this.$options = options;
// 数据响应
this.$data = options.data || {};
// 监听数据转变
this.observe(this.$data);
// 主要用来解析各种指令，比方v-modal，v-on:click等指令
new Compile(options.el,this);
// 施行生命周期
if(options.created){
options.created.call(this);
}
}
// 视察数据转变
observe(value){
if(!value || typeof value !== "object"){
return;
}
let keys = Object.keys(value);
keys.forEach((key)=> {
this.defineReactive(value,key,value[key]);
// 代理data中的属性到vue实例上
this.proxyData(key);
})
}
// 代理Data
proxyData(key){
Object.defineProperty(this,key,{
get(){
return this.$data[key];
},
set(newVal){
this.$data[key] = newVal;
}
})
}
// 数据响应
defineReactive(obj,key,val){
// 解决数据层次嵌套
this.observe(val);
const dep = new Dep();
Object.defineProperty(obj, key,{
get(){
// 向治理watcher的对象追加watcher实例
// 利便治理
Dep.target && dep.appDep(Dep.target);
return val;
},
set(newVal){
if(newVal === val){
return;
}
val = newVal;
// console.log(`${key}更新了：${newVal}`)
dep.notify();
}
})
}
}我们对data数据中的每一项都停止了数据挟持，可是然而并没有什么卵用啊，我们并没有对相对应的虚拟dom停止数据改动，当然我们必定是不克不及把我们的需要更换的虚拟dom操纵写在这里，然而在Vue中对其Dom停止了非凡的处置，渐渐的向下看。
想要做数据响应要做一个做详细更新的类何以用来治理这些视察者的类
// 治理watcher
class Dep {
constructor() {
// 储备
this.deps = [];
}
// 增加watcher
appDep(dep){
this.deps.push(dep);
}
// 通知所有的watcher停止更新
notify(){
this.deps.forEach((dep) => {
dep.update();
})
}
}
// 视察者 做详细更新
class Watcher {
constructor(vm,key,cb){
// Vue实例
this.vm = vm;
// 需要更新的key
this.key = key;
// 更新后施行的函数
this.cb = cb;
// 将当前watcher实例指定到Dep静态属性target
// 用来在类间停止通讯
Dep.target = this;
// 触发getter,增加依靠
this.vm[this.key];
Dep.target = null;
}
update(){
this.cb.call(this.vm,this.vm[this.key]);
}
}Dep.target = this上面这段代码必然要留意，是向Dep类中增加了一个静态属性。
主要用来解析各种指令，比方v-modal，v-on:click等指令。然后将模版中的变量更换成数据，渲染view，将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据发生变更，收到通知，更新视图。
简便说下双向绑定，双向绑定道理，在编译的时候可以解析出v-model在做操纵的时候，在使用v-model元素上增加了一个事件监听（input），把事件监听的回调函数作为事件监听的回调函数，假如input发生转变的时候把最新的值设定到vue的实例上，由于vue已经实现了数据的响应化，响应化的set函数会触发界面中所有依靠模块的更新，然后通知哪些model做依靠更新，所以界面中所有跟这个数据有管的东西就更新了。
class Compile {
constructor(el,vm) {
// 要遍历的宿主节点
this.$el = document.querySelector(el);
this.$vm = vm;
// 编译
if(this.$el){
// 转换宿主节点内容为片段Fragment元素
this.$fragment = this.node2Fragment(this.$el);
// 施行编译历程
this.compile(this.$fragment);
// 将编译完的HTML结果追加至宿主节点中
this.$el.appendChild(this.$fragment);
}
}
// 将宿主元素中代码片段取出来，遍历，这样做比力高效
node2Fragment(el){
const frag = document.createDocumentFragment();
// 将宿主元素中所有子元素**（搬场，搬场，搬场）**至frag中
let child;
// 假如 el.firstChild 为undefined或null则会休止轮回
while(child = el.firstChild){
frag.appendChild(child);
}
return frag;
}
compile(el){
// 宿主节点下的所有子元素
const childNodes = el.childNodes;
Array.from(childNodes).forEach((node) => {
if(this.isElement(node)){
// 假如是元素
console.log("编译元素"+node.nodeName)
// 拿到元素上所有的施行,伪数组
const nodeAttrs = node.attributes;
Array.from(nodeAttrs).forEach((attr) => {
// 属性名
const attrName = attr.name;
// 属性值
const exp = attr.value;
// 假如是指令
if(this.isDirective(attrName)){
// q-text
// 猎取指令后面的内容
const dir = attrName.substring(2);
// 施行更新
this[dir] && this[dir](node,this.$vm,exp);
}
// 假如是事件
if(this.isEvent(attrName)){
// 事件处置
let dir = attrName.substring(1); // @
this.eventHandler(node,this.$vm,exp,dir);
}
})
}else if(this.isInterpolation(node)){
// 假如是插值文本
this.compileText(node);
console.log("编译文本"+node.textContent)
}
// 递归子元素，解决元素嵌套问题
if(node.childNodes && node.childNodes.length){
this.compile(node);
}
})
}
// 可否为节点
isElement(node){
return node.nodeType === 1;
}
// 可否为插值文本
isInterpolation(node){
return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
// 可否为指令
isDirective(attr){
return attr.indexOf("q-") == 0;
}
// 可否为事件
isEvent(attr){
return attr.indexOf("@") == 0;
}
// v-text
text(node,vm,exp){
this.update( node, vm, exp, "text");
}
textUpdater(node,value){
node.textContent = value;
}
// 双向绑定
// v-model
model(node,vm,exp){
// 指定input的value属性，模型到视图的绑定
this.update(node,vm,exp,"model");
// 试图对模型的响应
node.addEventListener('input',(e) => {
vm[exp] = e.target.value;
})
}
modelUpdater(node,value){
node.value = value;
}
// v-html
html(node,vm,exp){
this.update(node,vm,exp,"html")
}
htmlUpdater(node,value){
node.innerHTML = value;
}
// 更新插值文本
compileText(node){
let key = RegExp.$1;
this.update( node, this.$vm, key, "text");
}
// 事件处置器
eventHandler(node,vm,exp,dir){
let fn = vm.$options.methods && vm.$options.methods[exp];
if(dir && fn){
node.addEventListener(dir,fn.bind(vm));
}
}
// 更新函数 - 桥接
update(node,vm,exp,dir){
const updateFn = this[`${dir}Updater`];
// 初始化
updateFn && updateFn(node,vm[exp]);
// 依靠收集
new Watcher(vm,exp,function(value){
updateFn && updateFn(node,value);
})
}
}其实Compile整个编译历程，就是在做一个依靠收集的工作，然Vue知道每一个指令是做什么的。并做出对应的更新处置。
Vue团体的编译历程，由于vue所编写的指令html没法停止识别，通过编译的历程可以停止依靠收集，依靠收集今后把data中的数据和视图停止了关联，发生了依靠关系，假如今后数据模型发生转变我们可以通过这些依靠通知这些视图停止更新，这是施行编译的目的，就可以做到数据模型驱动视图转变。
以上就是Vue实现道理的简便介绍的具体内容，更多请关注百分百源码网其它相关文章！
