vue2.0响应式原理分析

作者: Mr无愧于心 | 来源:发表于2019-03-06 09:45 被阅读0次

什么是MVVM

MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

MVVM的实现过程

需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

前提须知

Object.defineProperty()
观察者模式

开始封装

示例

let vm=new MVVM({
  el:'#app',
  data:{
    message:{
      a:'hello',
      b:'world'
    }
  }
})

以上代码接收一个对象包括el节点和data数据

MVVM.js

初始模板和数据
整合Observer、Compile和Watcher三者实现数据的响应式变化

class MVVM{
  constructor(options){
    this.$el=options.el;
    this.$data=options.data;
    if(this.$el){//如果有要编译的模板 就开始编译
      //数据劫持 就是把数据对象的所有属性，改成带set和get方法的，
      //当然 ，把需要劫持的数据传进去
      new Observe(thia.$data);
      //模板解析 
      //用数据和元素进行编译
      //当然要把模板el传进去，还传入当前实例，方便获取真实数据使用
      new Compile(this.$el,this);
    }
  }
}

observer.js 数据劫持

基于Object.defineProperty(data,key,{get(){},set(){}});
需要把data所有属性都进行监听，包括子属性（递归）
作用是当数据变化的时候触发set，可以再set中设置监听，触发重新编译，使视图更新

class Observer{
  constructor(data){
    this.data=data;
   
    this.observe(this.data);
    
  }
  observe(data){//循环所有的属性添加get set
    if(!data || typeof data!='object'){//data不是一个对象就不要往下进行了
      return;
    }
    //要将数据一一劫持 先获取到data的key和value
    Object.keys(data).forEach((key)=>{
      this.definedReactive(data,key,data[key]);
      this.observe(data[key]);//递归调用，给所有的属性都加get set
    })
  }
  definedReactive(data,key,value){
    Object.defineProperty(data,key,{
      get(){
        return value;
        // todo。。。
      },
      set(newValue){
        value=newValue;
        //这里数据值更新   todo。。。
      }
    })
  }
}

compile编译模板

在模板中，为避免node节点重复操作使用fragment文档碎片
筛选文本节点（处理{{}}），和元素节点（处理v-指令）
拿到指令中对应data的真实值，进行替换，换成真实数据
在把fragment插回到模板中

class Compile{
  constructor(el,vm){
      this.el=this.isElement(el)?el:document.querySelector(el);
      this.vm=vm;
      if(this.el){
        //如果能够取到元素 我们才开始编译
        //1.把el中的节点都放到fragment中，避免大量操作dom影响性能
        this.fragment=this.node2fragment(this.el);
        //2.编译=>提取想要的元素节点 v-model 和文本节点{{}}
        thnis.compile(this.fragment);
        //3.fragent插入回模板中
        this.el.appendChild(this.fragment);
      }
      
      
  }
  //一些辅助的方法
  isElement(el){//判断元素节点
    return el.nodeType==1;
  }
  isDirective(attr){//以v-开头的属性就是指令
    return attr.startsWith('v-');
  }
  //核心的方法
  node2fragment(el){
    let fragment=document.createDocumentFragment();
    let firstChild;
    while(firstNode=el.firstChild){//把所有真实的dom节点都放到fragment中去
      fragment.appendChild(firstChild);
      //如果将文档中的节点添加到文档碎片中，就会从文档树中移除该节点，
      //也不会在浏览器中再看到该节点
    }
    return fragment;
  }
  compile(fragment){
    //遍历所有的子节点判断节点类型
    let childNodes=fragment.childNodes;
        Array.from(childNodes).forEach(node=>{
            if(this.isElementNode(node)){//元素节点
                //如果是元素节点，深入判断他的子元素节点
                this.complie(node);//递归判断
                this.compileElement(node);
                //这里需要编译元素
                //提取元素上的v-model属性
            }else{//文本节点
                //这里需要编译为文本
                this.compileText(node)
            }
        })
  }
  compileElement(node){//编译元素
    let attrs=node.attributes;//取出当前节点的所有属性(类数组)
    Array.from(attrs).forEach((attr)=>{
      let attrName=attr.name;//  取到属性名
      if(this.isDirective(attrName)){//如果这个属性是一个指令
        //拿到属性值这个变量，替换真实数据
        let expr=attr.value;  
        //如果是 message.a 需要变成data.message.a
        //把指令后边的属性expr 替换成真实的data中的数据  绑定到dom上
         //node this.vm.$data expr
         let [,type]=attrName.split('-');//解构赋值v-model-->model
          CompileUtil[type](node,this.vm,expr);
      }
    })
  }
  compileText(node){//编译文本 针对{{}}
    let expr=node.textContent;//取文本中的内容
    //console.log(typeof expr,node)
    //console.log(typeof node,node)
    //对象类型不能用正则操作，所以用textContent
    let reg=/\{\{([^}]+)\}\}/;
    if(reg.text(expr)){//说明匹配到了{{}}语法
      //处理expr，
      //把{{}}就是expr 替换成真实的data中的数据  绑定到dom上
      //node this.vm.$data expr
       CompileUtil['text'](node,this.vm,expr);
    }
  }
}
let CompileUtil={
  getVal(vm,expr){
    expr=expr.split('.');//[message,a];
    return expr.reduce((prev,next)=>{
      return prev[next];
    },vm.$data)
  },
  getTextVal(vm,expr){
    return  expr.replace(/\{\{([^}])+\}\}/g,(...arg)=>{
      return  this.getVal(vm,arg[1])
    })
  },
  text(node,vm,expr){
    //expr是带{{}}的 ,需要先去大括号{{message.a}}{{message.b}}==>helloworld
    //vm.$data[expr]   //vm.$data['message.a']; 取不到数据 应该是vm.$data.message.a
    let updateFn=this.updater['textUpdater'];
    if(updateFn){
      updateFn(node,this.getTextVal(vm,expr))
    }
  },
  model(node,vm,expr){
    //vm.$data[expr]   //vm.$data['message.a']; 取不到数据 应该是vm.$data.message.a
     if(updateFn){
        updateFn(node,this.getVal(vm,expr))
     }
  },
  updater:{
    //文本更新({{}})
    textUpdater(node,value){
      node.textContent=value;
    },
   //指令属性值更新(v-model)
    modelUpdata(node,value){
      node.value=value;
    }
  }
}

以上的代码实现了真实数据替换指令中的变量，那么怎么将数据变化和视图更新联系起来，那么就用到了watcher

watcher

观察者的目的是给需要变化的元素增减一个观察者，当数据变化的时候执行对应的方法
当数据初始化的时候，先保存老的值，此时不调用数据更新，当值发生变化的时候就触发updata重新调用真实数据替换
那么watcher要做的事，就是保存老值，和数据变化时候，触发更新
获取真实数据需要 vm实例，指令对应的变量expr和数据更新后要执行的回调

class Watcher{
  constructor(vm,expr,cb){
    this.vm=vm;
    this.expr=expr;
    this.cb=cb;
    //先获取一下老的值
    this.value=this.getData();
  }
  //借用一下获取真实数据的函数
  getVal(vm,expr){
    expr=expr.split('.');
    return expr.reduce((prev,next)=>{
      return prev[next];
    },vm.$data);
  }
  getData(){
    let value=this.getVal(this.vm,this.expr);//拿到真实的数据
    return value;
  }
  //对外暴露的方法updata
  updata(){
    let newValue=this.getVal(this.vm,this.expr);//当updata执行的时候，获取新的真实的值
    let oldValue=this.value;//获取老的值；
    if(newValue!=oldValue){//如果执行updata的时候新的值和老的值不相等就调用回调函数
       this.cb(newValue)///调用对应watch的callback
    }
  }
}

dep----关于订阅发布

当监听data的时候，触发属性的get获取值的时候，应该把监听器watcher进行订阅，拿到老的真实的值
当数据变化，属性的set执行应该触发watcher的updata,执行updata的回调，在updata的回调中将真实数据绑定到模板上
第一次执行属性的get时，应该是数据第一次绑定到模板，不应该触发数据监听，以后的数据变化才应该进行updata，那么有了一个特殊的做法

class Dep{
  constructor(){
        //订阅的数组
        this.subs=[];
    }
    addSub(watcher){
        this.subs.push(watcher);
    }
    notify(){
        this.subs.forEach((watcher)=>{
            watcher.update();
        })
    }
}

结合订阅发布，实现数据的响应式变化

1.Observer

class Observer{
    constructor(data){
        this.data=data;
        this.observe(data)
    }
    observe(data){
        //要对这个数据监听将原有的属性改成set和get的形式
        if(!data || typeof data!=='object'){
            return;
        }
        //要将数据一一劫持 先获取到data的key和value
        Object.keys(data).forEach((key)=>{
            this.defineReactive(data,key,data[key])
            this.observe(data[key])//递归劫持
        })
    }
    //定义数据劫持
    defineReactive(obj,key,value){
        let that=this;
        let dep=new Dep();//每个变化的数据 都会对应一个数组，这个数组是存放所有更新的操作
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){
                //如果有target说明watcher进行了初始化，增加监听
                Dep.target&&dep.addSub(Dep.target)
                return value;
            },
            set(newValue){//当给data属性中设置值的时候 更改获取的属性的值
                if(newValue!=value){
                    that.observe(newValue)//劫持新的newValue(如果是对象 继续劫持)
                    value=newValue;
                    dep.notify();//通知所有人  数据更新了，触发watcher的updata函数，执行真实数据的绑定
                }
            }
        })
    }
}

Compile

class Compile{
    constructor(el,vm){
        this.el=this.isElementNode(el)?el:document.querySelector(el);
        this.vm=vm;
        if(this.el){
            //如果能够取到元素 我们才开始编译
            //1.先把这些真实的DOM移入到内存中 fragment
            let fragment=this.node2fragment(this.el);
            //2.编译=>提取想要的元素节点 v-model 和文本节点{{}}
            this.complie(fragment);
            //把编译好的fragment塞回到页面中去
            this.el.appendChild(fragment);
        }
    }





    /*专门写一些辅助的方法*/
    isElementNode(node){//判断是不是元素节点
        return node.nodeType==1;
    }
    isDirective(attrName){
        return attrName.startsWith('v-');
    }


    /*核心的方法*/
    node2fragment(el){//需要将el中的所有节点都放到文档碎片中去
        let fragment=document.createDocumentFragment();
        let firstChild;
        while(firstChild=el.firstChild){//把所有真实的dom节点都放到fragment中去
            fragment.appendChild(firstChild);//如果将文档中的节点添加到文档碎片中，就会从文档树中移除该节点，也不会在浏览器中再看到该节点
        }
        return fragment;
    }
    complie(fragment){//提取想要的元素节点 v-model 和文本节点{{}}
        let childNodes=fragment.childNodes;
        Array.from(childNodes).forEach(node=>{
            if(this.isElementNode(node)){//元素节点
                //如果是元素节点，深入判断他的子元素节点
                this.complie(node);//递归判断
                this.compileElement(node);
                //这里需要编译元素
                //提取元素上的v-model属性
            }else{//文本节点
                //这里需要编译为文本
                this.compileText(node)
            }
        })
    }
    compileElement(node){//编译元素
        //判断当前node元素属性上有没有v-的
        let attrs=node.attributes;//取出当前节点的所有属性(类数组)
        //console.log(attrs)
        Array.from(attrs).forEach((attr)=>{
            //判断属性名是不是包含v-的指令
            let attrName=attr.name;
            if(this.isDirective(attrName)){
                //取到真实的值方法node节点中
                let expr = attr.value;
                //把指令后边的属性expr 替换成真实的data中的数据  绑定到dom上
                //node this.vm.$data expr
                let [,type]=attrName.split('-');//解构赋值
                CompileUtil[type](node,this.vm,expr);
            }
        })

    }
    compileText(node){//编译文本 针对{{}}
        let expr=node.textContent;//取文本中的内容(字符串)
        //console.log(typeof expr,node)
        //console.log(typeof node,node)//对象类型不能用正则操作
        let reg=/\{\{([^}]+)\}\}/g;
        if(reg.test(expr)){//说明匹配到了{{}}语法
            //把{{}}就是expr 替换成真实的data中的数据  绑定到dom上
            //node this.vm.$data expr
            CompileUtil['text'](node,this.vm,expr);
        }

    }

}
CompileUtil={
    getVal(vm,expr){
        expr=expr.split('.');//[message,a];
        return expr.reduce((prev,next)=>{
            return prev[next];
        },vm.$data);
    },
    getTextVal(vm,expr){
        return expr.replace(/\{\{([^}]+)\}\}/g,(...arg)=>{
            return  this.getVal(vm,arg[1])
        })
    },
    setVal(vm,expr,value){
        expr=expr.split('.');//[message,a];
        return expr.reduce((prev,next,currentIndex)=>{
            if(currentIndex===expr.length-1){
                return prev[next]=value;
            }
            return prev[next];
        },vm.$data);
    },
    text(node,vm,expr){//文本处理
        let updateFn=this.updater['textUpdater'];
        //expr是带{{}}的 ,需要先去大括号{{message.a}}{{message.b}}==>helloworld
        //vm.$data[expr]   //vm.$data['message.a']; 取不到数据 应该是vm.$data.message.a
        let val=this.getTextVal(vm,expr)
        expr.replace(/\{\{([^}]+)\}\}/g,(...arg)=>{
                new Watcher(vm,arg[1],(newValue)=>{
                    //如果数据变化了，文本节点需要重新获取依赖的属性更新文本中的内容
                    updateFn&&updateFn(node,this.getTextVal(vm,expr));
                })
            })
        updateFn&&updateFn(node,val);
    },
    model(node,vm,expr){//输入框处理
        let updateFn=this.updater['modelUpdater'];
        //vm.$data[expr]   //vm.$data['message.a']; 取不到数据 应该是vm.$data.message.a



        //这里应该加一个监控，数据变化了 应该调用watch的callback(这里只是记录原始的值 watcher的updata没有执行，只有属性的set执行的时候，才会执行cb回调，重新进行真实数据绑定)
        new Watcher(vm,expr,(newValue)=>{
            //当值变化后，会调用cb将新值传递过来
            updateFn&&updateFn(node,this.getVal(vm,expr))
        })


        node.addEventListener('input',(e)=>{
            let newValue=e.target.value;
            this.setVal(vm,expr,newValue)
        })
        updateFn&&updateFn(node,this.getVal(vm,expr))

    },
    updater:{
        //文本更新({{}})
        textUpdater(node,value){
            node.textContent=value
        },
        //指令属性值更新(v-model)
        modelUpdater(node,value){
            node.value=value;
        }
    }
}

3.Watcher

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('.');//[message,a];
        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)///调用对应watch的callback
        }
    }
}

4.dep

class Dep{
    constructor(){
        //订阅的数组
        this.subs=[];
    }
    addSub(watcher){
        this.subs.push(watcher);
    }
    notify(){
        this.subs.forEach((watcher)=>{
            watcher.update();
        })
    }
}

5.MVVM

class MVVM{
    constructor(options){
        //一上来 先把可用的东西挂载在实例上
        this.$el=options.el;
        this.$data=options.data;

        //如果有要编译的模板 就开始编译
        if(this.$el){
            //数据劫持 就是把数据对象的所有属性，改成带set和get方法的
            new Observer(this.$data);
            //用数据和元素进行编译
            new Compile(this.$el,this);//并且把mvvm实例传进去，方便编译使用

        }
    }
}

以上实现一个数据响应式变化的MVVM框架，目前拥有v-model、{{}}指令,后期可增加其他指令的功能。

vue2.0响应式原理分析

什么是MVVM

MVVM的实现过程

前提须知

开始封装

示例

MVVM.js

observer.js 数据劫持

compile编译模板

watcher

dep----关于订阅发布

结合订阅发布，实现数据的响应式变化

1.Observer

3.Watcher

4.dep

5.MVVM

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读