Vue原理——初始化data属性

Posted 2021-01-09 ykli

let app = new Vue({
    data: {
        text: "text",
        text2: "text2"
    }
})

第一步：
使用observe函数对Vue中的data对象进行处理，使其可观察（observable）。这一步的实质就是使用Object.defineProperty方法重写data的属性，重写属性特征(主要指set和get两个属性特征函数，从而在获取属性值和设置属性值的时候插入额外的操作来实现视图中跟随数据变化)：
了解Vue实例化过程做了什么？下面可以看出，Vue实例化的时候，会把传入对象的data属性传递给实例的_data属性，同时，调用observe函数来处理_data也就是option.data。observe函数实质上就是使_data对象的所有属性的set, get。

class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data);
    }
}

observe函数具体的实现，其实就是遍历_data中的所有属性，调用defineProperty在set和get来注入取值和设置值时的额外操作。
其中，dep是一个数组，其中存放着依赖于当前属性的观察者列表，也就是属性改变时要通知列表中的这些对象来更新数据。

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

// defineReactive函数
function defineReactive(obj, key, value) {
    const dep = [];
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: () => {
            // 读取值时的额外操作，即绑定当前的观察者到依赖列表中
            dep.push(Dep.target);
            return value;
        },
        set: (newVal) => {
            if (newVal === value) { return };
            // 设置值时的额外操作，即设置值时通知依赖列表中的所有观察者来更新数据
            dep.forEach((a) => a.update);
            value = newVal;
        }
    })
}