vue3.0 對響應式系統模組進行重構，不再用object.defineproperty了，而是改用proxy。這樣做大體上有兩個好處，一是不用對陣列進行單獨處理了，去掉了vue.set 和 vue.delete介面，因為proxy可以對整個物件進行攔截操作。二是對原始物件資料變為響應式物件資料時不再一次全部進行攔截操作了，而是在使用時才進行攔截操作，這樣的話在元件初始化階段就會帶來效能提公升。要看vue 3.0的響應式系統，得先看看proxy，reflect這對**。
proxy，reflect詳細用法請參考阮一峰老師的文章(這裡我們著重分析一下vue3.0中用到的部分。先看乙個例子：
age is:
從生成的objproxy和例子的結果可以看到，proxy只能**一層，原始資料obj中的student屬性並沒有被**。所以修改這個屬性下的資料並不會觸發set攔截函式。之前我還以為對原始資料用一下proxy，所有物件都成響應式的了。這樣肯定是不行的，那怎麼讓obj下的所有屬性都成響應式物件呢？很自然的想到遞迴一下就能搞定了。**如下：
age is:
student屬性的值又成了乙個proxy物件了。通過例子的執行結果也能看到，修改age屬性，dom節點也更新了。
如果這樣做的話，和object.defineproperty 處理方式就一樣了，而且object.defineproperty 效能比proxy要好，也就達不到效能提公升效果。當元件初始化時可能並不會用到原始資料中的所有屬性，用到乙個屬性時才對這個屬性進行proxy**，這樣的話在元件初始化時只**用到的屬性，不用的屬性不進行**，那麼就會獲得乙個可能的效能提公升了。怎麼在使用這個屬性的時候對它進行proxy**呢？我們注意到，當修改objproxy.student.age時，get會被呼叫，所以在get 中做就可以了，**如下：
age is:
vue3.0就是這麼做的。注意這種做法只是可能進行效能提公升，如果在初始化元件時，物件中所有的屬性都用到的話，效能還不如vue2.0呢
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 響應式原理 const toproxy new weakmap 放置的是 原物件 過的物件 防止多次 同乙個物件 const toraw new weakmap 放置的是 過的物件 原物件 防止 已經 過的物件 判斷是否為物件 function isobject val 判斷key是否...
vue3 0學習第一天 vue3 0的亮點
performance 效能比vue2.x快1.2 2倍 tree shaking support 按需編譯，體積比vue20x更小 compostion api 組合api better typescript support 更好的ts支援 custom renderer api 暴露了自定義渲染...