響應式的過程
1.知道收集視圖依賴了哪些數據
2.感知被依賴數據的變化
3.數據變化時，自動“通知”需要更新的視圖部分，并進行更新
響應式原理實現邏輯
- 依賴收集
- 數據劫持、數據代理
- 發布/訂閱模式
Vue2響應式原理簡化
1.對象響應化：遞歸遍歷每個key，使用Object.defineproperty方法定義getter、setter
2.數組響應化：采用函數攔截方式，覆蓋數組原型方法，額外增加通知邏輯
-
響應式處理
//響應式處理
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
// 增加數組類型判斷，若是數組則覆蓋其原型
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 函數作用于對象屬性的值，進行取值和賦值操作時的攔截和處理
const key = keys[i]defineReactive(obj, key, obj[key])
}
}
}
-
數組處理
const originalProto = Array.prototype
//拷貝一份數組原型方法
const arrayProto = Object.create(originalProto);
//這七個方法會讓數組的長度或順序發生變化，需要單獨處理
['push', 'pop', 'shift','unshift','splice','reverse','sort'].forEach(
method => {
//方法重寫
arrayProto[method] = function() {
originalProto[method].apply(this, arguments)
//處理項進行響應式化
observe(inserted)
//派發更新
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
//派發更新
dep.notify()
}
}
})
}
image.png
Vue2響應式原理弊端
- 響應化過程需要遞歸遍歷消耗較大
2.新加或刪除屬性無法監聽數組響應化需要額外實現
3.Map、Set、Class等無法響應式修改
4.語法有限制
Vue3響應式原理簡化
vue3中使用ES6的Proxy特性來實現響應式
可以一次性友好的解決對象和數組
設計原理
effect：將回調函數保存起來備用，立即執行一次回調函數觸發它里面一些響應數據的getter
track（依賴收集）：getter中調用track，把前面存儲的回調函數和當前target,key之間建立映射關系
trigger（派發更新）：setter中調用trigger，把target,key對應的響應函數都執行一遍
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兩個參數
target:要使用 Proxy 包裝的目標對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）。
handler:一個通常以函數作為屬性的對象，各屬性中的函數分別定義了在執行各種操作時代理 p 的行為。
*/
const observed = new Proxy(obj,{
//Reflect 是一個內置的對象，它提供攔截 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)
//觸發響應函數
trigger(target,key)
return res
},
deleteProperty(target,key){
const res = Reflect.deleteProperty(target,key)
return res
}
})
//緩存代理結果
toProxy.set(obj,observed)
toRaw.set(observed,obj)
return observed
}
//保存當前活動響應函數作為getter和effect之間的橋梁
const effectStack = []
//設置響應函數，創建effect函數，執行fn并將其入棧
function effect(fn){
const rxEffect = function(){
//捕獲可能的異常
try{
//入棧，用于后續依賴收集
effectStack.push(rxEffect)
//運行fn，觸發依賴收集
return fn()
}finally{
//執行結束，出棧
effectStack.pop()
}
}
//默認執行一次響應函數
rxEffect()
//返回響應函數
return rxEffect
}
//映射關系表
//{target:{key:[fn1,fn2]}}
let targetMap = new WeakMap()
function track(target,key){
//從棧中取出響應式函數
const effect = effectStack[effectStack.length - 1]
if(effect){
let depsMap = targetMap.get(target)
if(!depsMap){
depsMap = new Map()
targetMap.set(target,depsMap)
}
//獲取key對應的響應函數集
let deps = depsMap.get(key)
if(!deps){
deps = new Set()
depsMap.set(key,deps)
}
//將響應函數加入到對應集合
deps.add(effect)
}
}
//觸發target，key對應響應函數
function trigger(target,key){
//獲取依賴表
const depsMap = targetMap.get(target)
if(depsMap){
//獲取響應函數集合
const deps = depsMap.get(key)
console.log(deps)
if(deps){
//執行所有響應函數
deps.forEach(effect=>{
effect()
})
}
}
}
//使用
//設置響應函數
const state = reactive({
foo:"aaa"
})
effect(()=>{
console.log(state.foo)//aaa bbb
})
state.foo
state.foo = "bbb"
