Vue2源码笔记(5)运行时-创建一个vue实例之initState数据代理

数据代理的作用是使得对vm.message的访问和vm.$options.data.message等效。

数据代理

这个逻辑也在initData()中实现：

function initData(vm) {
    let data = vm.$options.data;
    data = vm._data = isFunction(data) ? data.call(vm) : data || {};
    const ob = observe(data);
    
    for(let key in data){
        Proxy(vm, key, '_data');
    }
}
/**
 * 代理方法
 * 当取 vm.key 时，将它代理到 vm._data上去取
 * @param {*} vm        vm 实例
 * @param {*} key       属性名
 * @param {*} source    代理目标，这里是vm._data
 */
function Proxy(vm, key, source) {
    Object.defineProperty(vm, key, {
        get() {
            return vm[source][key];
        },
        set(newValue) {
            vm[source][key] = newValue;
        }
    })
}

总结

在这篇中我们完成了数据代理的功能。接下来就要进入到数据渲染了。