小記： 本章 主要瞭解命令式、聲明式、性能與可維護性的權衡、虛擬Dom的性能、運行時和編譯時。Vue就是通過權衡這幾種方式的優缺點進行框架設計 命令式、聲明式 對比 框架對比 命令式 聲明式 特點 只關註過程 只關註結果 優點 性能最高 心智負擔小，維護性高 優缺點 心智負擔大、維護性差 性能較高 ...
小記： 本章 主要瞭解命令式、聲明式、性能與可維護性的權衡、虛擬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 性能 非常高
靈活性差
