響應(yīng)式的過程

1.知道收集視圖依賴了哪些數(shù)據(jù)
2.感知被依賴數(shù)據(jù)的變化
3.數(shù)據(jù)變化時，自動“通知”需要更新的視圖部分，并進行更新

響應(yīng)式原理實現(xiàn)邏輯

• 依賴收集
• 數(shù)據(jù)劫持、數(shù)據(jù)代理
• 發(fā)布/訂閱模式

Vue2響應(yīng)式原理簡化

1.對象響應(yīng)化：遞歸遍歷每個key，使用Object.defineproperty方法定義getter、setter
2.數(shù)組響應(yīng)化：采用函數(shù)攔截方式，覆蓋數(shù)組原型方法，額外增加通知邏輯

• 響應(yīng)式處理

//響應(yīng)式處理
function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return  
    }  
    // 增加數(shù)組類型判斷，若是數(shù)組則覆蓋其原型  
    if (Array.isArray(obj)) {
        Object.setPrototypeOf(obj, arrayProto)  
    } else {
        //對象遍歷處理
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
                        // defineReactive方法在vue源碼中，主要是利用 Object.defineProperty 函數(shù)作用于對象屬性的值，進行取值和賦值操作時的攔截和處理
            const key = keys[i]defineReactive(obj, key, obj[key])   
        }  
    } 
}

• 數(shù)組處理

const originalProto = Array.prototype
//拷貝一份數(shù)組原型方法
const arrayProto = Object.create(originalProto);
//這七個方法會讓數(shù)組的長度或順序發(fā)生變化，需要單獨處理
['push', 'pop', 'shift','unshift','splice','reverse','sort'].forEach(
method => {
    //方法重寫
    arrayProto[method] = function() {
        originalProto[method].apply(this, arguments)
        //處理項進行響應(yīng)式化
        observe(inserted)
        //派發(fā)更新
        dep.notify() 
    }  
})

• 對象處理

function defineReactive(obj, key, val) {  
    observe(val) // 解決嵌套對象問題  
    Object.defineProperty(obj, key, {
        get() {
            //依賴收集
            dep.depend()
            return val   
        },
        set(newVal) {
            if (newVal !== val) {
                observe(newVal) // 新值是對象的情況
                val = newVal 
                //派發(fā)更新
                dep.notify() 
            }    
        } 
    })
}

image.png

Vue2響應(yīng)式原理弊端

1. 響應(yīng)化過程需要遞歸遍歷消耗較大
   2.新加或刪除屬性無法監(jiān)聽數(shù)組響應(yīng)化需要額外實現(xiàn)
   3.Map、Set、Class等無法響應(yīng)式修改
   4.語法有限制

Vue3響應(yīng)式原理簡化

vue3中使用ES6的Proxy特性來實現(xiàn)響應(yīng)式
可以一次性友好的解決對象和數(shù)組

設(shè)計原理

effect：將回調(diào)函數(shù)保存起來備用，立即執(zhí)行一次回調(diào)函數(shù)觸發(fā)它里面一些響應(yīng)數(shù)據(jù)的getter
track（依賴收集）：getter中調(diào)用track，把前面存儲的回調(diào)函數(shù)和當前target,key之間建立映射關(guān)系
trigger（派發(fā)更新）：setter中調(diào)用trigger，把target,key對應(yīng)的響應(yīng)函數(shù)都執(zhí)行一遍

const isObject = val => typeof val === 'object' && val !== null

• 緩存已處理的對象，避免重復代理

• WeakMap 對象是一組鍵/值對的集合，其中鍵是弱引用的，必須是對象，而值可以是任意的。

const toProxy = new WeakMap() //形如obj:observed
const toRaw = new WeakMap() //形如observed:obj
function reactive(obj){
    if(!isObject(obj)){
        return obj
    }
    //查找緩存，避免重復代理
    if(toProxy.has(obj)){
        return toProxy.get(obj)
    }
    if(toRaw.has(obj)){
        return obj
    }
    /*
    Proxy兩個參數(shù)
    target:要使用 Proxy 包裝的目標對象（可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個代理）。
    handler:一個通常以函數(shù)作為屬性的對象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時代理 p 的行為。 
    */
    const observed = new Proxy(obj,{
        //Reflect 是一個內(nèi)置的對象，它提供攔截 JavaScript 操作的方法。這些方法與proxy handlers的方法相同
        get(target,key,receiver){
            const res = Reflect.get(target,key,receiver)
            //依賴收集
            track(target,key)
            //遞歸處理嵌套對象
            return isObject(res)?reactive(res):res
        },
        set(target,key,value,receiver){
            const res = Reflect.set(target,key,value,receiver)
            //觸發(fā)響應(yīng)函數(shù)
            trigger(target,key)
            return res
        },
        deleteProperty(target,key){
            const res = Reflect.deleteProperty(target,key)
            return res
        }
    })
    //緩存代理結(jié)果
    toProxy.set(obj,observed)
    toRaw.set(observed,obj)
    return observed
}

//保存當前活動響應(yīng)函數(shù)作為getter和effect之間的橋梁
const effectStack = []
//設(shè)置響應(yīng)函數(shù)，創(chuàng)建effect函數(shù)，執(zhí)行fn并將其入棧
function effect(fn){
    const rxEffect = function(){
        //捕獲可能的異常
        try{
            //入棧，用于后續(xù)依賴收集
            effectStack.push(rxEffect)
            //運行fn，觸發(fā)依賴收集
            return fn()
        }finally{
            //執(zhí)行結(jié)束，出棧
            effectStack.pop()
        }
    }
    //默認執(zhí)行一次響應(yīng)函數(shù)
    rxEffect()
    //返回響應(yīng)函數(shù)
    return rxEffect
}

//映射關(guān)系表
//{target:{key:[fn1,fn2]}}
let targetMap = new WeakMap()
function track(target,key){
    //從棧中取出響應(yīng)式函數(shù)
    const effect = effectStack[effectStack.length - 1]
    if(effect){
        let depsMap = targetMap.get(target)
        if(!depsMap){
            depsMap = new Map()
            targetMap.set(target,depsMap)
        }
        //獲取key對應(yīng)的響應(yīng)函數(shù)集
        let deps = depsMap.get(key)
        if(!deps){
            deps = new Set()
            depsMap.set(key,deps)
        }
        //將響應(yīng)函數(shù)加入到對應(yīng)集合
        deps.add(effect)
    }
}

//觸發(fā)target，key對應(yīng)響應(yīng)函數(shù)
function trigger(target,key){
    //獲取依賴表
    const depsMap = targetMap.get(target)
    if(depsMap){
        //獲取響應(yīng)函數(shù)集合
        const deps = depsMap.get(key)
        console.log(deps)
        if(deps){
            //執(zhí)行所有響應(yīng)函數(shù)
            deps.forEach(effect=>{
                effect()
            })
        }
    }
}


//使用
//設(shè)置響應(yīng)函數(shù)
const state = reactive({
    foo:"aaa"
})
effect(()=>{
    console.log(state.foo)//aaa   bbb
})
state.foo
state.foo = "bbb"