阅读剖析 Vue.js 内部运行机制-响应式核心

[baixiaoji]

这是什么东西？（明白该想project的定义）

为什么要做这个东西？（想想做这个东西的动机）

如何做这个东西？（拆解细节）

回顾（项目过程中的执行、以及心态的变化）

ref: #8

[baixiaoji]

2018-11-12

响应式系统的基本原理

本节当中，主要讲了一下 Object.defineProperty的功能，把对应的响应数据做了一定的劫持，当赋值的时候调用对应的更新函数

class Vue {
    constructor(option) {
        this._data = option._data
        observer(this._data);
    }
}

function observer(value) {
    if (!value || (typeof value !== 'object')) {
        return;
    }

    Object.keys(value).forEach((key) => {
        defineReactive(value, key, value[key]);
    })
}

function defineReactive(obj, key, value) {
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        get() {
            return value;
        },
        set(newValue) {
            if (newValue !== value) {
                cb(newValue);
            }
        },
    })
}
function cb (val) {
    /* 渲染视图 */
    console.log("视图更新啦～");
}

[baixiaoji]

小册的着重点依旧还是介绍了，整个数据响应式的核心以及自身实现的方式，当时整体的设计VNode部分不不是本次的重点，所以了解了大概情况。