vue.js响应式原理解析与实现

vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天，就我们就来一步步解析vue.js响应式的原理，并且来实现一个简单的demo。

首先，先让我们来了解一些基础知识。

 

基础知识

Object.defineProperty

es5新增了Object.defineProperty这个api，它可以允许我们为对象的属性来设定getter和setter,从而我们可以劫持用户对对象属性的取值和赋值。比如以下代码:

const obj = {};

let val =  'cjg';
Object.defineProperty(obj, 'name', {
    get () {
        console.log('取值操作')
        return val
　　},
　　set (newVal) {
　　　　console.log('fu值操作')
        val = newVal
　　}
})
console.log(obj.name)
obj.name = 'zfj'
console.log(obj.name)

 

我们通过Object.defineProperty劫持了obj[name]的取值和赋值操作，因此我们就可以在这里做一些手脚啦，比如说，我们可以在obj[name]被赋值的时候触发更新页面操作。

　

发布订阅模式

发布订阅模式是设计模式中比较常见的一种，其中有两个角色：发布者和订阅者。多个订阅者可以向同一发布者订阅一个事件，当事件发生的时候，发布者通知所有订阅该事件的订阅者。我们来看一个例子了解下。

class Dep {
    constructor () {
        this.subs = [];
    };
    //添加订阅
    addSub (sub) {
        debugger
        if(this.subs.indexOf(sub) < 0) {
            this.subs.push (sub)
        }
    };
    //通知订阅者
    notify () {
        this.subs.forEach((subs)=>{
            sub.updata();
        })
    };
};
const dep = new Dep();
const sub = {
    updata () {
        console.log('sub1 updata');
    }
};
const sub1 = {
    updata () {
        console.log('sub2 updata');
    }
};
dep.addSub(sub);
dep.addSub(sub1);
dep.notify();

 

　

动手实践

我们了解了Object.defineProperty和发布订阅者模式后，我们不难可以想到，vue.js是基于以上两者来实现数据监听的。

1. vue.js首先通过Object.defineProperty来对要监听的数据进行getter和setter劫持，当数据的属性被赋值/取值的时候，vue.js就可以察觉到并做相应的处理。

2. 通过订阅发布模式，我们可以为对象的每个属性都创建一个发布者，当有其他订阅者依赖于这个属性的时候，则将订阅者加入到发布者的队列中。利用Object.defineProperty的数据劫持，在属性的setter调用的时候，该属性的发布者通知所有订阅者更新内容。 

接下来，我们来动手实现(详情可以看注释)：

//实践检测一组数据
let data = {
    name: 'cba',
    obj:{
        age:123
    }
}
//定义观察者服务
class observer {
    constructor(){
        if(!data || typeof data !== 'object') {
            return
        }
        this.data = data
        this.walk()
    }
    //对传入数据进行劫持
    walk(){
        for(let key in this.data){
            this.defineRactive(this.data, key, this.data[key])
        }
    }
    //为属性注册发布者
    defineRactive(obj,key,val){
        //定义发布者
        let dep = new Dep()
        //如果属性值为Object继续劫持，层层递归
        new observer(val)

        Object.defineProperty(obj,key,{
            get(){
                if(Dep.target){
                    dep.addSub(Dep.target)
                }
                return val
            },
            set(newVal){
                if(val === newVal){
                    return
                }
                new observer(newVal)
                dep.notify()
            }
        })
    }
}

class Dep {
    constructor(){
        this.subs = []
    }
    addSub(sub){
        if(this.subs.indexOf(sub) < 0){
            this.subs.push(sub)
        }
    }
    notify(){
        this.subs.forEach((sub)=>{
            sub.upadta()
        }) 
    }
}
Dep.target = null
class watch {
    constructor(vm, key, updataCb){
        this.vm = vm
        this.key = key
        this.updataCb = updataCb
        this.value = null
        this.get()
    }
    get(){
        Dep.target = this
        let keys = this.keys.split('.')
        let value = this.vm
        keys.forEach((_key)=>{
            value = value[_key]
        })
        this.value = value
        Dep.target = null
        return this.value
    }
    updata(){
        let oldValue = this.value
        let newValue =  this.get()
        this.updataCb(oldValue,newValue)
    }
}


new observer(data)
new watch(data,'name',(a,b)=>{
    console.log(a,b)
})