【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

前言：

学习前端也有半年多了，个人的学习欲望还比较强烈，很喜欢那种新知识在自己的演练下一点点实现的过程。最近一直在学vue框架，像网上大佬说的，入门容易深究难。不管是跟着开发文档学还是视频教程，按步骤操作总是最肤浅，想要把这门功课做好毕竟得下足功夫。因此，特意花了好几天时间阅读相关技术博客和源码，简单实现了一个数据双向绑定的vue框架，希望能让各位有点启发...

1.什么是MVVM

MVVM即modle-view-viewmole,MVVM最早由微软提出来，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

2.数据的双向绑定

在vue框架中，通过控制台或者Vue Devtools修改data里的一些属性时会看到页面也会更新，而在页面修改数据时，data里的属性值也会发生改变。我们就把这种model和view同步显示称为是双向绑定。其实单向绑定原理也差不多，视图改变data更新通过事件监听就能轻松实现了,重点都在希望data改变视图也发生改变，而这就是我们下面要讲的原理。

3.vue数据双向绑定原理

 3.1 Object.defineProperty()方法

首先要知道的是vue的数据绑定通过数据劫持配合发布订阅者模式实现的，那么什么是数据劫持呢？我们可以在控制台看一下它的初始化对象是什么样的：

 let vm = new Vue({
        el:"#app",
        data:{
            obj:{
                a:1
            }
        },
        created() {
            console.log(this.obj)
        },
    })

可以看到属性a分别对应着一个get 和set方法，这里引申出Object.defineProperty()方法，传递三个参数，obj(要在其上定义属性的对象)、prop(要定义或修改的属性的名称)、descriptor(将被定义或修改的属性描述符)。该方法更多信息参考：参考更多用法，着重强调一下get和set这两个属性描述键值。

• get 存取描述符的可选键值，一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。

• set 存取描述符的可选键值，一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

平常我们在打印一个对象属性时会这样做： 

var obj = {
   name:"tnagj"
}
console.log(obj.name)  //tangj

 如果我们想要在输出的同时监听obj的属性值，并且输出的是tangjSir呢？这时候我们的set和get属性就起到了很好的作用

 var obj ={};
 var name = '';
 Object.defineProperty(obj,'name',{
     set:function(value){
         name = value
         console.log('我叫：' + name)
     },
     get:function(){
        console.log(name + 'Sir')
     }
 })
 obj.name = 'tangj';  //我叫tangj
 obj.name;         //tangjSir

首先我们定义了一个obj空对象以及name空属性，再用一个Object.defineProperty()方法来判断obj.name的访问情况，如果是读值则调用get函数，如果是赋值则调用set函数。在这两个函数里面我们分别对输出的内容作了更改，因此在get方法调用时打印tangjSir，在set方法调用时打印我叫tangj。

其实这就是vue数据绑定的监听原理，我们能通过这个简单实现MVVM双向绑定。

3.2 MVVM双向绑定分析 

view的变化，比如input值改变我们很容易就能知道通过input事件反应到data中，数据绑定的关键在于怎样让data更新view。首先我们要知道数据什么时候变的，上文提过可以用Object.defineProperty()的set属性描述键值来监听这个变化，当数据改变时就调用set方法。

那么我们可以设置一个监听器Observe，用来监听所有的属性，当属性变化的时候就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。当然我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。所以，我们大致可以把整个过程拆分成五个部分，MVVM.html，MVVM.js，compile.js，observer.js，watcher.js，我们在MVVM.js中创建所需要的实例，在.html文件中引入这些js文件，这样拆分更容易理解也更好维护。

4.分步拆分

4.1 MVVM.JS

为了和Vue保持一致，我们向MVVM.js传入一个空对象options，并让vm.$el = options.el，vm.$data = options.data，如果能取到vm.$el再进行编译和监听

class MVVM {
       constructor(options){    
       this.$el = options.el, //把东西挂载在实例上
       this.$data = options.data      
        if(this.$el){    // 如果有要编译的就开始编译            
            new Observer(this.$data); //数据劫持，就是把对象的所有属性改成get和set方法
            new Compile(this.$el,this);//用数据和元素进行编译
        }      
   }
}

4.2  Compile.js

编译的时候有一个问题需要注意，如果直接操作DOM元素会特别消耗性能，所以我们希望先把DOM元素都放在内存中即文档碎片，待编译完成再把文档碎片放进真实的元素中

class Complie{
   constructor(el,vm){
       this.el = this.isElementNode(el)?el:document.querySelector(el);
       this.vm = vm;
       if(this.el){//如果这个元素能获取到，我们才开始编译                   
           let fragment = this.nodeToFragment(this.el); //1.先把真实的DOM移入到内存中，fragment            
           this.compile(fragment); //2.编译=>提取想要的元素节点v-modle 和文本节点{{}}          
           this.el.appendChild(fragment) //3.把编译好的fragment塞回页面
       }
       nodeToFragment(el){   //需要el元素放到内存中
       let fragment = document.createDocumentFragment();
       let Child;
       while(Child = el.firstChild){
           fragment.appendChild(Child);
       }
       return fragment;
    }
  }
}

接下来我们要判断需要编译的是元素节点还是文档节点，还记得Vue中有很多很有用的指令吗？比如"v-modle"、"v-for"等，所以我们还要判断元素节点内是否包含指令，如果是指令，它应该包含一些特殊的方法

/* 省略.... */
    isElementNode(node){  //是不是元素节点
        return node.nodeType === 1;
    }   
    isDirective(name){   //是不是指令
        return name.includes('v-')
    }
 compileElement(node){
          //带v-modle 
          let attrs = node.attributes;
          Array.from(attrs).forEach(
              attr =>{
                 let attrName = attr.name;
                 if(this.isDirective(attrName)){
                   // 取到对应的值放到节点中
                   let expr = attr.value;                       
                   // node vm.$data expr
                   let [,type] = attrName.split('-')  //解构赋值
                   CompileUtil[type](node,this.vm,expr)
                 }
              }
          )
    }
    compileText(node){
         // 带{{}}
         let expr = node.textContent; //取文本的内容
         let reg = /{{([^}]+)}}/g  //全局匹配
         if(reg.test(expr)){
             // node this.vm.$data expr
             CompileUtil['text'](node,this.vm,expr)
         }
    }
    compile(fragment){  //需要递归，拿到的childNodes只是第一层
        let childNodes = fragment.childNodes;       
        Array.from(childNodes).forEach(
            node=>{
                if(this.isElementNode(node)){  //是元素节点，还需要递归检查
                    this.compileElement(node)  //编译元素
                    this.compile(node)  //箭头函数this指向上一层的实例
                }else{             //文本节点
                    this.compileText(node)  //编译文本
                }
            }
        )
    }

根据获取的节点类型不同，执行不同的方法，我们可把这些方法统一都放到一个对象里面去

CompileUtil = {
    getVal(vm,expr){  //获取实例上的数据   
        expr = expr.split('.'); //如果遇到vm.$data[a.a]，希望先拿到vm.$data[a]             
        return  expr.reduce((prev,next)=>{  
            return prev[next]
        },vm.$data)      
    },    
    getTextVal(vm,expr){  //获取编译文本以后的结果
            return expr.replace(/{{([^}]+)}}/g,(...arguments)=>{  
                return this.getVal(vm,arguments[1]);
        })       
    },
    text(node,vm,expr){       // 文本处理        
       let updateFn = this.updater['textUpdater'];     
       let value = this.getTextVal(vm,expr);          
       updateFn && updateFn(node,value);      
    },  
    modle(node,vm,expr){   // 输入框处理
        let updateFn = this.updater['modleUpdater']        
        updateFn && updateFn(node,this.getVal(vm,expr))
    },
    updater:{
        textUpdater(ndoe,value){
             ndoe.textContent = value //文本更新
        },        
        modleUpdater(node,value){
             node.value = value  
        }
    }
}

4.3 Oberver.js

编译的时候我们还需要一个监听者，当数据变化调用get和set方法

class Observer{
    constructor(data){
        this.observer(data)
    }
    observer(data){       
        if(!data || typeof data !== 'object') return;
         Object.keys(data).forEach(key =>{
             this.defineReactive(data,key,data[key]);
             this.observer(data[key])
         })         
    }
    defineReactive(obj,key,value){
        let that = this;      
        Object.defineProperty(obj,key,{
            enumerable:true,         
            configurable:true,
            get(){                           
               Dep.target && dep.addSub(Dep.target);            
                return value;
            },
            set(newvalue){
                if(value === newvalue) return;              
                that.observer(newvalue);  //如果新值是对象，继续劫持
                value = newvalue;
            },
        })
    }
}

4.4 Watcher订阅者和Dep监听器

前面已经实现了监听和编译，但是怎么样才能让它们之间进行通信呢，也就是当监听到变化了怎么通知呢？这里就用到了发布订阅模式。默认观察者watcher有一个update方法，它会更新数据。Dep里面创建一个数组，把观察者都放在这个数组里面，当监听到变化，一个个调用监听者update方法。

// Watcher.js
//观察者的目的就是给需要变化的那个元素增加一个观察者，当数据变化后执行对应的方法
class Watcher{
    constructor(vm,expr,cb){
        this.vm = vm;
        this.expr = expr;        
        this.cb = cb;
        //先获取老的值
        this.value = this.get()       
    }
    getVal(vm,expr){  //获取实例上的数据   
        expr = expr.split('.'); //如果遇到vm.$data[a.a]，希望先拿到vm.$data[a]        
        // console.log(expr)
        return  expr.reduce((prev,next)=>{  
            return prev[next]
        },vm.$data)      
    }
    get(){
        Dep.target = this;  //缓存自己
        let value = this.getVal(this.vm,this.expr);    
        Dep.target = null; //释放自己     
        return value;
    }
    update(){
        let newValue = this.getVal(this.vm,this.expr);       
        let oldValue = this.value;
        if(newValue != oldValue){
            this.cb(newValue);
        }
    }
}
//Dep.js
class Dep{
    constructor(){
        //订阅的数组
        this.subs = []
    }
    addSub(watcher){
        this.subs.push(watcher)
    }
    notify(){
        this.subs.forEach(watcher =>{
            watcher.update()
        })
    }
}

watcher逻辑： 当创建watcher实例的时候，先拿到这个值，数据变化又拿到一个新值，如果新值和老值不一样，那么调用callback，实现更新；

dep逻辑：创建数组把观察者放在这个数组里，当监听到变化，执行watcher.update()

我们再它们分别添加到Observer和compile中

// complie.js
// 省略....
text(node,vm,expr){       // 文本处理        
       let updateFn = this.updater['textUpdater'];       
       //{{message.a}} => tangj
       let value = this.getTextVal(vm,expr);
       expr.replace(/{{([^}]+)}}/g,(...arguments)=>{
           new Watcher(vm,arguments[1],(newVaule)=>{
               // 如果数据变化，文本节点需要重新获取依赖的属性更新文本的的内容
               updateFn && updateFn(node,this.getTextVal(vm,expr));
           })
    })              
       updateFn && updateFn(node,value);      
    },  
    modle(node,vm,expr){   // 输入框处理
        let updateFn = this.updater['modleUpdater']
         // 'message.a' => [message.a] vm.$data['message'].a
         // 这里应该加一个监控，数据变化，调用这个watch的cb
         new Watcher(vm,expr,(newVaule)=>{
             //当值变化后将调用cb，将新的值传递过来
            updateFn && updateFn(node,this.getVal(vm,expr))
         });
         node.addEventListener('input',(e)=>{
             let newVaule = e.target.value;
             this.setVal(vm,expr,newVaule)
         })
        updateFn && updateFn(node,this.getVal(vm,expr))
    }
// 省略...

// observer.js
class Observer{
    constructor(data){
        this.observer(data)
    }
    observer(data){ 
        //要对这个data数据原有属性改成set和get的形式
        if(!data || typeof data !== 'object') return;
         Object.keys(data).forEach(key =>{
             this.defineReactive(data,key,data[key]);
             this.observer(data[key])
         })         
    }
    defineReactive(obj,key,value){
        let that = this;       
        let dep = new Dep();  //每个变化的数据都会对应一个数组，这个数据存放了所有数据的更新
        Object.defineProperty(obj,key,{
            enumerable:true,         
            configurable:true,
            get(){                           
               Dep.target && dep.addSub(Dep.target);            
                return value;
            },
            set(newvalue){
                if(value === newvalue) return;              
                that.observer(newvalue);  //如果新值是对象，继续劫持
                value = newvalue;
                dep.notify(); //通知所有人数据更新
            },
        })
    }
}
class Dep{
    constructor(){
        //订阅的数组
        this.subs = []
    }
    addSub(watcher){
        this.subs.push(watcher)
    }
    notify(){
        this.subs.forEach(watcher =>{
            watcher.update()
        })
    }
}

到这里我们就实现了数据的双向绑定，MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

当然我们还需要数据代理，用vm代理vm.$data，也是通过Object.defineProperty()实现

 this.proxyData(this.$data);

proxyData(data){
       Object.keys(data).forEach(key =>{
           let val = data[key]
           Object.defineProperty(this,key,{
               enumerable:true,
               configurable:true,
               get(){                   
                   return val
               },
               set(newval){
                   if(val == newval){
                    return;
                   }
                   val = newval
               }
           })
       })
   }

5.最终效果

本次学习源码已上传github：https://github.com/Tangjj1996/MVVM，喜欢的朋友可以stars

参考博客：基于vue实现一个简单的MVVM框架（源码分析）

PS:MVVM是学习框架非常重要的一步，掌握了这些原理才能更好地运用，知其然更要知其所以然，水平有限有错误的地方烦请多多指教