// 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)
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 響應式工具集
使用 import from vue 1 unref 判斷是否是ref物件,是返回ref物件.value值,不是返回引數本身 語法糖 val isref val val.value val const xx unref x 2 readonly 接受乙個物件 reactive響應式或js純物件 或r...
Vue3 0 響應式系統（一）
vue3.0 對響應式系統模組進行重構，不再用object.defineproperty了，而是改用proxy。這樣做大體上有兩個好處，一是不用對陣列進行單獨處理了，去掉了vue.set 和 vue.delete介面，因為proxy可以對整個物件進行攔截操作。二是對原始物件資料變為響應式物件資料時不...
手寫基礎版Vue響應式原理
我們新建了乙個obj物件，然後 new observe doctype html en utf 8 viewport content width device width,initial scale 1.0 document title head 0 h1 index.js script const...