vue响应式系统实现原理

256

Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象。但是当数据进行改变时视图也会跟着变化,他的实现原理就是通过响应式系统。

Object.defineProperty(通过该函数实现响应式系统)

通过object.defineProperty可以让对象变为可观察的。

通过以下该方法的处理,
obj的key 在读取的时候就会触发testGetter()方法
obj的key 在写入的时候就会触发testSetter()方法,在触发更新视图的方法。
    第一个参数obj: 目标对象
    第二个参数prop: 目标对象的属性名 如 key 
    第三个参数descriptor:描述符{}中包含一些属性
    function test (obj, key, val) {
        Object.defineProperty(obj, key, {
            enumerable: true,       /* 属性可枚举 */
            configurable: true,     /* 属性可被修改或删除 */
            get: function testGetter () {
                return val;         获取属性的方法(依赖收集)
            },
            set: function testSetter (newVal) {
                if (newVal === val) return;
                                  设置属性的方法 
                //渲染页面方法 testRender()
            }
        });
    }

仅有defineProperty是不够的,因为上述方法我们只能对某个对象中其中一个属性值进行 响应式处理。如果想要处理一个对象所有的属性可以使用 observer,通过遍历对象属性的方法对 对象进行响应式处理。

function observer (value) {
    if (!value || (typeof value !== 'object')) {
        return;
    }
    
    Object.keys(value).forEach((key) => {
        test(value, key, value[key]);上一个响应式方法test
    });
}

在vue的源码中我们通过observer监听data对象的变化 就可以做到数据变化 视图的时时更新。

class Vue {
    /* Vue构造类 */
    constructor(options) {
        this._data = options.data;
        observer(this._data);
    }
}