从零实现一个简易的vue框架

双向绑定是指既可以数据驱动视图，又可以视图驱动数据，那么要实现这样一个功能意味着我们需要将dom节点中与双向绑定相关的指令与属性传入一个类似于“加工工厂”的类中，进行筛选和加工，最后实现一个甄别出关键参数和指令并根据指令实现数据双向绑定的完整“工艺流程”。

vue数据响应式双向绑定的实现机制，大致如下流程：

 

 

 

实现具体思路如下：我们new出的MVVM类内含有各种属性，我们就需要实现一个监听类Observer，内含Object.defineProperty()方法去劫持各个属性的setter和getter以时刻察觉到MVVM类的变化，然后再将这个变化通知给Dep订阅器，Dep订阅器算是一个通知观察者的通信员和储存不同观察着不同属性的观察者（每个观察者只能观察一个属性）的容器，同时Dep订阅器通知观察者Watcher去更新DOM节点从而实现视图的更新。流程如下图红线：

 

 

 

接下来实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数,添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图，而在初始化视图时，走的时下图的红线流程，当解析器识别到数据变动时，又会走蓝线的流程去更新视图。

 

 

我们将实现该图流程划分如下：

1. 实现一个指令解析器Compile

2. 实现一个数据监听器Observer

3. 实现一个观察者Watcher（来更新视图）

4. 实现一个proxy代理

 

 

1.实现一个指令解析器Compile

 

Compile对el绑定的根元素的子节点的指令（如v-text，{{}}，v-on等）进行一个扫描和解析，根据指令模板找到对应的挂载节点去替换数据，具体实现的方式就是绑定一个回调更新函数，传递给Watcher来更新视图。此外还要在Compile中获取一个文档碎片对象，放入内存中会减少页面的回流和重绘，文档碎片对象中对元素对象和文本对象进行处理，并甄别出传入的text，model等不同指令并针对不同的指令处理不同的事件。

 

 

class Compile{
  constructor(el,vm){
    // 判断el是否为元素节点，不是则获取其值
    this.el=this.isElementNode(el) ? el : document.querySelector(el);
    this.vm = vm;
    // 1.获取文档碎片对象 放入内存中减少页面的回流重绘
   const fragment = this.node2Fragment(this.el);
    // console.log(fragment);
    // 2.编译fragment模板
    this.compile(fragment);
    // 3.追加子元素到根元素
    this.el.appendChild(fragment);
  };

  // 编译fragment模板的方法
  compile(fragment){
    // 1.获取到每一个子节点
    const childNodes=fragment.childNodes;
    [...childNodes].forEach(child=>{
      if(this.isElementNode(child)){
        // 是元素节点
        // 编译元素节点
        this.compileElement(child);
      }else{
        // 文本节点
        // 是否编译文本节点
        this.compileText(child);
      }

      if(child.childNodes && child.childNodes.length){
        this.compile(child);
      }

    })
  };

  // 编译元素节点的方法
  compileElement(node){
    const attributes=node.attributes;
    [...attributes].forEach(attr=>{
      const {name,value}=attr;
      if(this.isDirective(name)){ //判断是否为一个指令
        const [ ,dirctive]=name.split('-');
        // console.log(dirctive);
        const[dirName,eventName] = dirctive.split(':');
        // 更新数据，数据驱动视图
        compileUtil[dirName](node,value,this.vm,eventName);
        // 删除有指令的标签上的属性
        node.removeAttribute('v-' + dirctive);
      }else if(this.isEventName(name)){
       let[ ,eventName]= name.split('@');
       compileUtil['on'](node,value,this.vm,eventName);
      }
    })
  }

  // 是否编译文本节点的方法
  compileText(node){
    // 编译{{}}
    const content =node.textContent;
    // console.log(content);
    if(/\{\{(.+?)\}\}/.test(content)){
      compileUtil['text'](node,content,this.vm)
    }
  }

  isEventName(attrName){
    return attrName.startsWith('@')
  }

  isDirective(attrName){
    return attrName.startsWith('v-')
  }

  // 获取所有孩子节点
  node2Fragment(el){
    // 1.创建文档碎片
    const f=document.createDocumentFragment();
    let firstChild;
    // 2.遍历取出所有节点加入f中
    while(firstChild=el.firstChild){
      f.appendChild(firstChild);
    }
    return f;
  }
  
  // 判断是否为元素节点的方法
  isElementNode(node){
    return node.nodeType === 1;
  }
}

 

2.实现一个数据监听器Observer

 我们接下来实现的是一个数据监听器Observer,能够对数据对象的所有属性进行监听，如有变动可拿到最新值通知依赖收集对象(Dep)并通知订阅者(Watcher)来更新视图。

 

class Observer{
  constructor(data){
    this.observe(data)
  }

  // 观察数据的方法
  observe(data){
    if(data && typeof data==='object'){
     //console.log(Object.keys(data)); 
     Object.keys(data).forEach(key=>{
      this.defineReactive(data,key,data[key])
     })
    }
  }

  defineReactive(obj,key,value){
    //递归遍历
    this.observe(value);
    const dep=new Dep();
    // 劫持并监听所有的属性
    Object.defineProperty(obj,key,{
      enumerable:true,
      configurable:false,
      get(){
        // 订阅数据变化时，往Dep中添加观察者
       Dep.target && dep.addSub(Dep.target)
        return value;
      },
      set:(newVal)=>{
        this.observe(newVal)
        if(newVal!==value){
          value=newVal;
        }
        // 告诉dep通知变化
        dep.notify()
      }
    })
  }
}

 

3. 实现一个Watcher

它作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

只要所做事情:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notify()通知时，能调用自身的update()方法，并触发Compile中绑定的回调。

class Watcher{
  constructor(vm,expr,cb){
    this.vm=vm;
    this.expr=expr;
    this.cb=cb;
    // 先把旧值保存起来
    this.oldVal = this.getOldVal()
  }
  
  getOldVal(){
    Dep.target=this;
   const oldVal= compileUtil.getVal(this.expr,this.vm);
   Dep.target=null;
   return oldVal;
  }

  update(){
  const newVal= compileUtil.getVal(this.expr,this.vm);
  if(newVal!==this.oldVal){
    this.cb(newVal);
  }
  }
}

// 实现一个订阅器
class Dep{
  constructor(){
    this.subs=[];
  }
  // 收集观察者
  addSub(watcher){
    this.subs.push(watcher);
  }
  // 通知观察者去更新
  notify(){
    this.subs.forEach(w=>w.update())
  }
}

4. 实现一个proxy代理

我们在使用vue的时候,通常可以直接vm.msg来获取数据,这是因为vue源码内部做了一层代理.也就是说把数据获取操作vm上的取值操作 都代理到vm.$data上

proxyData(data){
    for(const key in data){
      Object.defineProperty(this,key,{
        get(){
          return data[key];
        },
        set(newVal){
          data[key]=newVal;
        }
      })
    }
  }

致此一个简易的vue源码就实现了，我们来测试一下：

 

<script src="./Observer.js"></script>
  <script src="./Myvue.js"></script>
  <script>
    let vm=new Myvue({
      el:'#app',
      data:{
        person:{
          name:"funkyou",
          age:21,
          fav:'ukulele',
        },
        msg:"mvvm自制版",
        htmlStr:'<h3>我是一个前端实习生</h3>'
      },
      methods:{
        handleClick(){
          // console.log(this);
          this.$data.person.name='Chrome'
        }
      },
    })
  </script>

 

对应的页面如图：

实现了数据的改变同步到页面上。

 

在我的GitHub上查看源码：

https://github.com/173392531/vue-