1.vue簡介

　　vue最初的名字Element 後來更名為Seed.js

　　vue的由來，想起view，但是view不太好，然後就去找各種翻譯的view，最後選擇了法語的vue。

　　vue的定位：The Progressive Framework, 漸進式框架。

2.變化偵測

　　從狀態生存DOM，再輸出到使用者介面顯示的一整套流程叫作渲染。

　　響應式系統賦予框架重新渲染的能力，重要組成部分是變化偵測。

　　變化偵測分為兩種型別：一種是“推”（push），一種是“拉”（pull）。

　　Angular和React屬於pull，當狀態發生變化的時候，它不知道哪個變化了，只知道狀態可能變化了，然後會發送一個訊號告訴框架，框架內部收到訊號後，會通過一個暴力對比來找出哪些DOM節點需要重新渲染。Angular中是髒檢查，React中是虛擬DOM。

　　Vue屬於push，狀態改變時，vue立刻就知道了，而且在一定程度上知道哪些狀態變了。

　　偵測變化的方式：Object.defineProperty（vue2) 和 ES6的 Proxy (vue3)

　　在getter中收集依賴，setter中觸發依賴。觸發getter，會新增一個依賴到Dep，每當值修改時，就會讓依賴列表中所有的依賴迴圈觸發update。　　

　　因為是通過將物件的key轉換成getter/setter的形式來追蹤變化，但是getter/setter只能追蹤一個數據是否被修改，無法追蹤新增屬性和刪除屬性，所以提供了vm.$set, vm.$delete。

　　Array的變化偵測：

　　使用攔截器攔截原型來監聽變化。因為是攔截原型，所以有些操作攔截不到，比如 this.list[0] = 2 , this.list.length = 0

3.虛擬DOM

　　虛擬DOM的終極目標是將虛擬節點（vnode）渲染到檢視上。但是如果直接覆蓋掉的話，會有很多不必要的DOM操作。

　　DOM操作比較慢，所以這些DOM操作在效能上會有一定的浪費，避免這些DOM操作會提升很大一部分效能。

　　虛擬DOM在Vue中主要做的事情：

　　1.提供與真實DOM節點所對應的虛擬節點vnode

　　2.將虛擬節點vnode和舊虛擬節點oldVnode進行對比，然後更新檢視。

　　vnode，可以理解成js物件版本的DOM元素。

　　虛擬DOM的核心部分是patch，它可以將vnode渲染成真實的DOM。

　　主要做三件事：

　　1.建立新增的節點

　　2.刪除已經廢棄的節點

　　3.修改需要更新的節點

4.模版編譯原理

　　模版編譯成渲染函式可以分為兩個步驟，先將模版解析成AST(Abstract Syntax Tree，抽象語法樹)，然後再使用AST生成渲染函式。

　　模版編譯大體分為三部分：

　　將模版解析為AST，遍歷AST標記靜態節點，使用AST生成渲染函式

5.整體流程。

　　熟悉所使用功能的內部實現，當業務出現bug的時候，可以快速，精準定位問題，知道是vue的特性導致，還是程式碼邏輯有問題。可以清楚的知道vue能提供

　　的能力邊界在哪裡，最大限度發揮價值。

　　vue的整體結構，可以分為三個部分：核心程式碼，跨平臺相關和公用工具函式。

　　例項方法：

　　資料相關：vm.$watch, vm.$set, vm.$delete

　　事件相關：vm.$on, vm.$once, vm.$off, vm.$emit　　

　　生命週期相關：vm.$mount, vm.$forceUpdate, vm.$nextTick, vm.$destory

　　事件迴圈：js單執行緒非阻塞指令碼語言，非阻塞是指當代碼需要處理非同步任務時，主執行緒會掛起這個任務，當非同步任務處理完成後，主執行緒再根據一定規則去執行相應回撥。

　　執行站中所有任務執行完畢後，就會去檢查微任務佇列中是否有事件存在，如果存在，則會依次執行微任務佇列中對應的回撥，直到為空。然後去巨集任務佇列中取出一個事件，

　　把對應回撥加入當前執行棧，無限重複。

　　微任務：promise.then、 mutaitionObserver、object.observer、process.nextTick

　　巨集任務：setTimeout、setInterval、setImmediate、requestAnimationFrame

　　函式劫持：新方法中呼叫原始的方法。可以在原始功能上新增一些其他的功能。

　　生命週期

　　vue初始化的順序也是精心安排的，先初始化props，後初始化data，所以data中可以使用props的資料。watch中既可以觀察props，也可以觀察data

原始碼中經常使用到遍歷跟正則表示式。