Vue深入-27【对象劫持、访问属性代理】

一.对象劫持

observe/index.js

import Observer from './observer'
export function initState(vm){
    let options = vm.$options;
    if(options.data){
        initData(vm);
    }
    if(options.computed){
        initComputed(vm);
    }
    if(options.watch){
        initWatch();
    }
}
export function observe(data){
    if(typeof data !== 'object' || data == null){
        return
    }
    return new Observer(data);
}
function initData(vm){
    let data = vm.$options.data;
    data = vm._data = typeof data === 'function' ? data.call(vm) : data || {};
    observe(vm._data);
    //代理
    for (let key in data){
        proxy(vm,'_data',key)
    }
}
function proxy(vm,source,key){
    Object.defineProperty(vm,key,{
        get(){
            return vm[source][key];
        },
        set(newValue){
            vm[source][key] = newValue;
        }
    })
}
function initComputed(){

}
function initWatch(){}

observer/observer.js

import { observe } from ".";

export function defineReactive(data,key,value){
    observe(value);
    Object.defineProperty(data,key,{
        get(){
            console.log('getter执行');
            return value;
        },
        set(newValue){
            if(newValue === value) return;
            observe(newValue);
            console.log('setter执行');
            value = newValue;
        }

    })
}
class Observer{
    constructor(data){
        this.walk(data);
    }
    walk(data){
        let keys = Object.keys(data);
        for(let i = 0; i < keys.length;i++){
            let key = keys[i];
            let value = data[key];
            defineReactive(data,key,value);
        }
    }
}
export default Observer;

二.访问属性代理

observe/index.js

function initData(vm){
    let data = vm.$options.data;
    data = vm._data = typeof data === 'function' ? data.call(vm) : data || {};
    observe(vm._data);
    //代理
    for (let key in data){
        proxy(vm,'_data',key)
    }
}
function proxy(vm,source,key){
    Object.defineProperty(vm,key,{
        get(){
            return vm[source][key];
        },
        set(newValue){
            vm[source][key] = newValue;
        }
    })
}