手写Vue数据响应式原理

亦凉 2022-08-30 11:21 234阅读 0赞

# 手写Vue数据响应式原理 #

// 判断是否是对象
    function isObserve(obj){ 
        // 因为null 也是object typeof null ====》'object'
        return obj !== null && !Array.isArray(obj) && typeof obj === 'object'
        // 返回布尔值 如果是对象返回true
    }
    
    function observe(obj){ 
        if(!isObserve(obj)){ 
            // 不处理非对象
            return; 
        }
        // 遍历对象的每一个属性
        Object.keys(obj).forEach((key)=>{ 
            var dep = new Dep()
            // 重新定义属性
            var internalValue = obj[key];
            observe(internalValue);
            Object.defineProperty(obj,key,{ 
                get(){ 
                    // 看一下那个函数用到了我这个属性，将该函数记录下来
                    dep.depend();
                    return internalValue;
                },
                set(val){ 
                    observe(val)
                    internalValue = val;
                    // 通知所有用到我这个属性的，全部重新运行
                    dep.notify()
                }
            })
        })
    }
    
    /** * 定义一个构造函数，用于是谁在依赖 */
    function Dep(){ 
        // new 一个Set，一个元素不可重复的数组，用于记录依赖
        this.subscribes = new Set();
    }
    
    
    Dep.prototype.depend = function(){ 
        // 判断存不存在，如果存在，就记录在依赖数组中
        if(activeUpdate){ 
            this.subscribes.add(activeUpdate)
        }
    }
    
    Dep.prototype.notify = function(){ 
        // 将activeUpdate数组拿出来，然后循环执行就好了
        this.subscribes.forEach(fn => fn())
    }
    
    // 当前正在收集依赖的函数
    var activeUpdate = null;
    
    /** * 自动运行指定函数 * @param {*} fn */
    function autorun(fn){ 
        function Wrapper(){ 
            activeUpdate = Wrapper;
            // 该函数的运行期间，activeUpdate一定有值
    
            fn();
            activeUpdate = null;
        }
        Wrapper()
    }
    
    var state = { 
        name: 'diudiu',
        age: 18,
        addr: { 
            province: "四川",
            city: '成都'
        },
    };
    
    observe(state)
    autorun(()=>{ 
        if(state.age%2!==0){ 
            console.log("姓名", state.name, "地址", state.addr.province, state.addr.city);
        }
    })
    
    
    state.age = 19;
    // -->姓名 diudiu 地址 四川 成都
    state.name = '勾勾'
    // --> 姓名 勾勾 地址 四川 成都
    state.addr.province = "上海";
    // --> 姓名 勾勾 地址 上海 成都
    state.addr.city = "南京";
    // --> 姓名 勾勾 地址 上海 南京