Vue底層學習1——原理解析

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/14945934.html， 多謝，=。=~（如果對你有幫助的話請幫我點個贊啦）

作爲一個Web前端開發人員，使用Vue框架進行項目開發已經有一陣子，掐指一算，是時候認真探索一下Vue的底層了，以前的瞭解比較偏理論，這一次打算在弄清基本原理的前提下自己手寫Vue中的核心部分，也許這樣我纔敢說自己“深入理解”了Vue，話不多說，開幹，先聊聊大家熟知的理論部分～

Vue工作機制

初始化

• 在執行new Vue()之後，會創建一個Vue實例並進行初始化操作，包括生命週期（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed）、事件、props、methods、data、computed、watch等。

• 其中最重要的就是通過Object.defineProperty重寫data對象中各個屬性的setter及getter方法，用於實現【響應式】和【依賴收集】。

• 初始化完成後會調用$mount將Vue實例掛載到指定的dom節點。

工作流程

基於Vue源碼整理出了一張總覽圖，我們可以清晰的看到Vue的整個工作機制：

• init即初始化，上面已經對初始化做了簡單概述。
• compile即編譯器，主要是對template模板（Vue中的html代碼）進行掃描，最終生成一些渲染函數，同時實現依賴收集（作用是當數據更新時我們可以知道去界面中更新哪個DOM節點）。
• render function即渲染函數，用於生成虛擬DOM樹。我們在做數據更新時，修改的數據並不是進行真實的DOM操作，而是虛擬DOM上的數值，在做更新之前還會進行diff算法比較，根據最新值和舊值計算出需要做的最小更新。
• Watcher即觀察者，數據發生變化時實現感知，調用更新函數，從而進行補丁操作。
• patch即補丁操作，根據數據變化實現界面更新。目的是通過JS的計算時間換取DOM操作時間，從而提高性能。核心思想是減少頁面渲染的次數及數量。

Vue響應式原理

爲了方便後續手擼MVVM，在上述工作流程的基礎上實現了簡化：

編譯

• parse：使用正則解析template中的Vue指令（v-xxx）變量等等，最終形成語法樹AST。
• optimize：標記一些靜態節點，用作後面的性能優化，在做diff算法的時候直接略過。
• generate：把第一部分生成的AST（抽象語法樹：Abstract Syntax Tree）轉化爲渲染函數render function。

響應式

初始化時通過Object.defineProperty進行綁定，設置通知機制。當編譯器生成的渲染函數被實際渲染時，會觸發getter進行依賴收集，在數據變化時觸發setter進行更新。

虛擬DOM

Virtual DOM是React首創，Vue2開始支持，就是用JavaScript對象來描述DOM結構，數據修改時，我們先修改虛擬DOM中的數據，然後對數據進行diff算法計算，最後彙總所有的diff，力求做最少的DOM操作，畢竟在js裏面對比很快，而真實的DOM操作太慢。

// VDOM
{
  "tag": "div",
  "props": {
    "name": "dreamsyang",
    "style": {
      "color": "red"
    },
    "onClick": xxx
  },
  "children": [
    {
      "tag": "a",
      "text": "click me"
    }
  ]
}

<div name="dreamsyang" style="color: red;" @click="xxx">
    <a>
    	click me
    </a>
</div>

參考資料

1、Vue官方文檔：https://cn.vuejs.org/；
2、Vue源碼：https://github.com/vuejs/vue；