Vue 之 响应式数据

目标

自己实现轮子：数据响应式引擎

基石

属性拦截器

操作对象

Data
数据类型

数据处理

class Observer {
    value: any;
    dep: Dep;
    vmCount: number;
    constructor(value: any) {
        this.value = value;
        this.dep = new Dep();
        this.vmCount = 0;
        def(value, '__ob__', this);
        if(Array.isArray(value)) {
            augment(value, arrayMethods, arrayKeys);
            this.observerArray(value);
        }else {
            this.walk(value);
        }
    },
    
    walk(obj: Object) {
        const keys = Object.keys(obj);
        for (let i = 0; i < keys.length; i ++) {
            defineReactive(obj, keys[i]);
        } 
    },
    
    observerArray (items: Array<any>) {
        for (let i = 0; i< items.length; i++) {
            observer(items[i]);
        }
    }
}