vue的源码分析

文章来自此处：4、依赖跟踪_哔哩哔哩_bilibili

1.实现响应式： 主要使用了object.DefineProperty属性 setter/getter

let  obj={
        name:'yang',
        age:12,
        person:'5555'
    }
    function changeKey(obj){
        Object.keys(obj).forEach((key)=>{
            let initVal=obj[key];
            Object.defineProperty(obj,key,{
                set(newVal){
                    console.log('change==:'+newVal)
                     return newVal
                },
                get(){
                    console.log('get==:'+initVal)
                   return initVal     
                }
            })
        })
    }
    changeKey(obj);

观察者实现：

let state = {
        name: 'yang',
        age: 12,
        person: '5555',
        count: 100
    }

    function obverse(obj) {
        Object.keys(obj).forEach((key) => {
            let initVal = obj[key];
            Object.defineProperty(obj, key, {
                set(newVal) {
                    console.log('set change==:' + newVal)
                    dep.notify();
                    return newVal
                },
                get() {
                    // console.log('get==:' + initVal)
                    dep.depend();
                    return initVal
                }
            })
        })
    }
    obverse(state);
    class Dep {
        constructor() {
            this.subscribers = new Set();
        }
        depend() {
            if (activeUpdate) {
                this.subscribers.add(activeUpdate)
            }
        }
        notify() {
            this.subscribers.forEach(subs => subs())
        }
    }
    let dep = new Dep();
    let activeUpdate;
    //实现一个vue观察者模式
    function autorun(update) {
        function warppendUpdate() {
            activeUpdate = warppendUpdate;
            update();
            activeUpdate = null;
        }
        warppendUpdate()
    }
    autorun(() => {
        console.log(state.count)
    })
    state.count++;