小記： 本章 主要了解命令式、宣告式、性能與可維護性的權衡、虛擬Dom的性能、運行時和編譯時，Vue就是通過權衡這幾種方式的優缺點進行框架設計
- 命令式、宣告式
- 對比
框架對比 命令式 宣告式 特點 只關注程序 只關注結果 優點 性能最高 心智負擔小，維護性高 優缺點 心智負擔大、維護性差 性能較高 代碼對比
給div實作點擊事件const div = document.querySelector('#app')
div.addEventListener('click', () => { alert('系結OK') })<div @click="()=>alert('ok')">點我</div> - 性能與可維護性進行權衡
結論 ：宣告式代碼的性能不優于命令式代碼的性能
a. 在命令式代碼中我們修改某個元素或者內容，直接操作即可 ： div.textContent = ' hello'
b. 在Vue中，修改某個元素的屬性或內容，我們得先找到前后的差異，并更新差異 （這個地方可了解diff）
上述性能對比：
記： A = 直接修改性能得消耗， B = 尋找差異得性能消耗
那么 a = A b = A+B
上述驗證符合我們得結論
Vue為啥用宣告式呢？
主要原因就是宣告式代碼的可維護性強，所以在權衡可維護性和性能時，Vue要做的就是在保證可維護性得同時讓代碼的性能損失最小
3. 虛擬DOM的性能到底如何
1. 先了解一下 innerHtml 的性能
innerHtml 在創建的程序中將一串模板字串決議為Dom樹
虛擬DOM創建頁面的程序分為兩步
創建JS物件==》真實DOM的描述
遞回遍歷虛擬DOM并創建真實DOM
在上述前提下，我們會覺得innerHtml性能會和虛擬DOM差不多
當涉及大量元素修改的時候，innerHtml每次都得銷毀所有DOM重新渲染，而虛擬DOM只需要查找不一樣的進行渲染
綜上，innerHtml的性能是與資料量有關系的，而虛擬DOM與資料變化量有關
2.innerHtml、 虛擬DOM、元素JS性能對比
| innerHtml 模板 | 虛擬DOM | 原生Js |
| 心智負擔中等 | 心智負擔小 | 心智負擔大 |
| 性能差 | 性能不錯 | 性能高 |
| 可維護性差 | 可維護性強 | 可維護性差 |
注： 涉及DOM層面的計算要比JS層面的計算性能要差的多
4. 運行時、編譯時
結論 Vue3.js是一個運行時加編譯時的框架， 在保證靈活的前提下，通過分析用戶提供的內容盡可能提升性能
1. 運行時：
每一個元素編譯之后都是一個js物件 tag children
我們直接創建這樣的物件進行reder渲染 稱為運行時框架
2. 運行時+ 編譯時
我們創建html 在呼叫compiler編譯 在用render渲染
消耗性能
3. 編譯時
用戶直接將html編譯為命令式代碼 直接操作dom 性能 非常高
靈活性差
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503129.html
標籤：其他