手寫Vue3 0響應式原理

// vue3.0 響應式原理
const toproxy = new weakmap() // 放置的是 原物件：**過的物件  防止多次**同乙個物件
const toraw = new weakmap() // 放置的是 **過的物件：原物件 防止**已經**過的物件
// 判斷是否為物件
function isobject(val) 
// 判斷key是否在這個物件上面
function hasown(target, key) 
// 響應式的核心方法
function reactive(target) 
// 建立響應式物件的方法 **物件
function createreactiveobject(target) 
const alreadyproxy = toproxy.get(target) // 如果已經**過了 就將**過的物件返回
if(alreadyproxy) 
if (toraw.has(target)) 
const basehandler = ,
set(target, key, value, receiver)  else if (oldvalue !== res) 
const result = reflect.set(target, key, value, receiver)
return result
},deleteproperty(target, key) 
}const observed = new proxy(target, basehandler)
toproxy.set(target, observed)
toraw.set(observed, target)
return observed
}// const obj = }
// let proxy = reactive(obj)
// let proxy1 = reactive(obj)
// let proxy2 = reactive(proxy)
// proxy.name
// proxy.name = 'vue3.0'
// proxy.version.name = 'vue3'
// console.log(proxy.name)
// console.log(proxy.version.name)

vue3.0的需要注意的點：

1.我們都知道vue2.0**物件會預設遞迴，所以在資料層級特別深的情況下，響應的速度會慢，vue3.0的**是在get()裡面對當前屬性進行**，用就**，不用就不**，而且還會通過toproxy這個weakmap將**過的物件儲存起來，防止物件被多次**，這樣我們就判斷是否**過當前物件，如果沒有**過，那就對新物件**；反之，如果**過了這個物件，那我們就直接返回**過的物件，就行了。還有一種情況是，**過的物件又走了reactive()方法，這樣就會導致對**過的物件返回的proxy再進行**，顯然我們是不希望看見這樣的現象的，所以我們將已經**過的物件存到toraw這個weakmap裡面，然後我們判斷是否**過這個物件，如果**過，同樣就返回**過的物件就行了，這裡一定要注意和toproxy區分開來。顯然我們能發現vue3.0的這種實現在效能上遠剩於vue2.0。

2.vue3.0是能對陣列進行**的，它能夠監聽到陣列的變化。但是我們知道當乙個陣列發生變化時，實際上過程是這樣的：如果我們給陣列push乙個資料，它會先在資料的末尾新增乙個資料，然後改變陣列的length加1，這樣出現的問題就是，會出發兩次set()方法，所以我們需要將新值和老值進行比較，如果不相同的話，那麼就證明這個值是有意義的，它不是length這種屬性，我們就執行賦值操作就可以了。

3.由於es5的限制，es6新增的proxy無法被轉譯成es5，所以proxy的相容性就有了問題，也就導致vue3.0無法相容ie，所以未來想要上vue3.0的人需要注意著一點，當然了，尤雨溪說未來vue3.0會相容到ie11，現在vue3.0還處於release版本，估計正式版也在不就後就會推出，就可以考慮學習一下了。

4.我比較推薦看原始碼的時候看beta版本，packages包比較少，而且目錄比較清晰，學習起來更加容易一些。

如果有寫的不足的地方，歡迎在下方交流討論

手寫Vue3 0響應式原理

vue3 0 響應式工具集

Vue3 0 響應式系統（一）

手寫基礎版Vue響應式原理

手寫Vue3 0響應式原理

vue3 0 響應式工具集

Vue3 0 響應式系統（一）

手寫基礎版Vue響應式原理

相關推薦