關於前端視圖更新前言
接到分享任務後一直比較頭疼，不知道分享什麼內容，能夠把此次分享做的比較好。後來偶然在網上看到一篇文章，非常有啓發性，引導我做出了本次的內容
代碼地址：（https://codepen.io/collection/DkxpbE）
代碼寫的很精妙，短短一百多行代碼，還原出來VUE響應式的核心思想。而我花了很長的時間去閲讀這段代碼，感慨我和尤雨溪之間的前端水平還是有不少差距的。
（雷軍：詩一樣的代碼）
分析
vue2在mount（準備階段）時通過watchEffect（副作用）判斷是否初次生成
是的話就生成DOM解構並通過JS更新到H5中（虛擬DOM）
否的話就判斷前後兩次傳入的代碼，分別判斷和更新tag類型，傳入的props，判斷children（子組件）。並把不同的部分重新渲染。
vue2使用Object.defineProperty,通過set劫持數據，使用dep.notify()通知對應watcher（上文的watchEffect），watcher調用_update更新視圖
Dep中負責生成虛擬DOM刷新頁面的的Effect（副作用函數）在什麼時候監聽進去的呢，答案是在首屏加載的時候。Dep和Watcher是一對多的關係，可以同時監聽多組watchEffect數據
一個較為完整的流程圖
總結和展望
官方文檔中提到VUE3的object攔截器Object.defineProperty已經替換成了Proxy。在幾個小試驗之後，我發現Proxy是Object.defineProperty的外層封裝，相當於我攔截了你的攔截。網上找了一下資料，發現對比defineProperty優點可能是能攔截數組，新增了delete方法，還有更高的自由度。
上文可以解釋為什麼VUE2我們在子組件中修改傳入的obj，會觸發父組件的重新渲染，其實是觸發了監聽在父組件上的date的set劫持。
可以推測出VUE3中傳入子組件的object變成了一份深拷貝的複製品，就不會再觸發這個問題了，react同理。（單向數據流思想）
寫完這些，感覺對前端框架的理解又深入了，感覺做出自己的前端框架也不是不可能。當然，客觀的來説這次討論的只是前端框架的一小部分原理，其外還有大量的優化和功能沒有涉及，實際上只是拋磚引玉，希望能發散出更多對前端框架的思考。
項目代碼
https://github.com/Alan1034/vue-update
參考文章
https://mp.weixin.qq.com/s/Dopiz0jgqJiSbhLOLzkQbA
https://www.cnblogs.com/datiangou/p/10144883.html
https://www.cnblogs.com/weblff/p/14144414.html
謝謝觀看