JavaScript剖析vue数据响应式原理

一、数据响应式的原理概述

Vue2.0

  Vue数据响应式，是利用了Object.defineProperty()这个方法重新定义了对象获取属性值get和设置属性值set的操作来实现的。

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被获取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被设置了')
        }
})
obj.name = 'zhangsan';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法

Vue3.0

  Vue3.0版本中是采用ES6的Proxy对象来实现数据响应式的。

二、 数据响应式的实现

  我们先大致看下vue编译解析的整体架构图，如下图所示：

js实现简单的数据响应式

1、view视图层创建html代码

<div id="app">
    <h3>数据响应式</h3>
    <div>
    	<div v-text="myText"></div>
    	<input type="text" v-model="myText"/>
    </div>
</div>

2、根据vue架构图创建MVVM基本架构

// 发布者
class Vue{
    constructor(options) {
    	this.options = options;
    	this.$data = options.data;
    	this.$el = document.querySelector(options.el);// #app 获取app对象
    	this._directive = {};// 容器：存放订阅者
    
    	this.Observe(this.$data);
    	this.Compile(this.$el);
    }
    // 劫持数据
    Observe(data) {}
    // 解析指令
    Compile(el) {}
}
// 订阅者
class Watcher {
	
}

// 实例化Vue对象
var app = new Vue({
    el: '#app',
    data: {
    	myText: 'hello world!'
    }
})

3、然后实现MVVM中模型层(M)的数据绑定到视图层(V)

// 发布者
class Vue{
    constructor(options) {
    	this.options = options;
    	this.$data = options.data;
    	this.$el = document.querySelector(options.el);// #app 获取app对象
    	this._directive = {};// 容器：存放订阅者
    
    	this.Observe(this.$data);
    	this.Compile(this.$el);
    }
    // 劫持数据
    Observe(data) {
    	for (let key in data) {
    		this._directive[key] = []
    	}
    
    }
    // 解析指令
    Compile(el) {
    	let nodes = el.children;
    	for (let i = 0;i < nodes.length;i++) {
            let node = nodes[i];
            // 递归，把嵌套的元素都查找，看是否有指令
            if(node.children.length) {
            	this.Compile(node)
            }
            if(node.hasAttribute('v-text')) {
            	let attrVal = node.getAttribute('v-text');
            	this._directive[attrVal].push(new Watcher(node, this, attrVal, 'innerHTML'));
            }
            if(node.hasAttribute('v-model')) {
            	let attrVal = node.getAttribute('v-model');
            	this._directive[attrVal].push(new Watcher(node, this, attrVal, 'value'));
            }
    	}
    }
}
// 订阅者
class Watcher {
    constructor(el, vm, exp, attr) {
    	this.el = el;// 元素对象 div input
    	this.vm = vm;
    	this.exp = exp;
    	this.attr = attr;
    
    	this.update();
    }
    update() {
    	this.el[this.attr] = this.vm.$data[this.exp];
    }
}

4、最后实现MVVM中视图层(V)的数据更新绑定到模型层(M)

// 发布者
class Vue{
    constructor(options) {
    	this.options = options;
    	this.$data = options.data;
    	this.$el = document.querySelector(options.el);// #app 获取app对象
    	this._directive = {};// 容器：存放订阅者
    
    	this.Observe(this.$data);
    	this.Compile(this.$el);
    }
    // 劫持数据
    Observe(data) {
    	for (let key in data) {
            this._directive[key] = [];
            
            let val = data[key];
            let watch = this._directive[key];
            Object.defineProperty(data, key, {
            	get: function() { 
            	    return val;
            	},
            	set: function(newVal) {
                    if(newVal !== val) {
                        val = newVal;
                        watch.forEach(element => {
                        	element.update()
                        })
                    }
            	}
            })
    	}
    }
    // 解析指令
    Compile(el) {
        let nodes = el.children;
        for (let i = 0;i < nodes.length;i++) {
            let node = nodes[i];
            // 递归，把嵌套的元素都查找，看是否有指令
            if(node.children.length) {
                this.Compile(node)
            }
            if(node.hasAttribute('v-text')) {
                let attrVal = node.getAttribute('v-text');
                this._directive[attrVal].push(new Watcher(node, this, attrVal, 'innerHTML'));
            }
            if(node.hasAttribute('v-model')) {
                let attrVal = node.getAttribute('v-model');
                this._directive[attrVal].push(new Watcher(node, this, attrVal, 'value'));
                
                node.addEventListener('input', () => {
                	this.$data[attrVal] = node.value;
                })
            }
        }
    }
}
// 订阅者
class Watcher {
    constructor(el, vm, exp, attr) {
    	this.el = el;// 元素对象 div input
    	this.vm = vm;
    	this.exp = exp;
    	this.attr = attr;
    
    	this.update();
    }
    update() {
    	this.el[this.attr] = this.vm.$data[this.exp];
    }
}

小结

  通过js来实现，我们就更深入的了解Vue2.0的数据响应式原理。希望本篇博客可以给学习Vue的小伙伴带来一些帮助！以后有机会再对Vue3.0 Proxy对象进行分析~~