【vue】5、生命周期、虛拟dom、$屬性和方法、vue初入檔案結構

為了自己複習寫的部落格

不排除有錯誤的地方和了解不到位的地方

歡迎指正！

虛拟dom

浏覽器解析的工作流程

1. 解析html，建構dom樹。在解析的同時會将CSS樣式解析成CSS規則樹
2. 生成css規則樹cssom
3. 将dom樹和css規則數關聯，生成render樹
4. 布局，确定render樹的節點的位置和尺寸
5. 繪制render樹

真實dom是當每次dom某個節點更改時，都從頭即建構dom樹開始。很消耗性能。

虛拟dom是将所有的更改儲存到一個js對象中，最終将這個JS對象的所有更改一次性加載到DOM樹上，再進行後續操作。這個對象就是虛拟dom。頁面的更新先全部反映在操作記憶體中的虛拟DOM上，等更新完成後，再将最終的JS對象映射成真實的DOM。

問：CSSOM和DOM是如何變成渲染樹的？

1. 從DOM樹的根節點開始周遊每個可見節點(不包括displaynone的節點，包括visibilityhidden的節點)
2. 對于每個可見節點，為其找到适配的CSSOM規則并應用它
3. 生成渲染樹，然後布局和繪制

https://www.jianshu.com/p/af0b398602bc