一、簡答題
1、請簡述 Vue 首次渲染的過程。
- 首先進行Vue的初始化，初始化Vue的實例成員以及靜態(tài)成員。
- 當(dāng)初始化結(jié)束之后，開始調(diào)用構(gòu)造函數(shù)，在構(gòu)造函數(shù)中調(diào)用this._init()，這個方法相當(dāng)于我們整個Vue的入口。
- 在_init()中調(diào)用this.
mount()。
第一個this.mount()的核心作用是幫我們把模板編譯成render函數(shù)，但它首先會判斷一下當(dāng)前是否傳入了render選項，如果沒有傳入的話，它會去獲取我們的template選項，如果template選項也沒有的話，他會把el中的內(nèi)容作為我們的模板，然后把模板編譯成render函數(shù)，它是通過compileToFunctions()函數(shù)，幫我們把模板編譯成render函數(shù)的,當(dāng)把render函數(shù)編譯好之后，它會把render函數(shù)存在我們的options.render中。
- src\platforms\web\entry-runtime-with-compiler.js
- 如果沒有傳遞render，把模版編譯成render函數(shù)
- compileToFunction()生成render()渲染函數(shù)
- options.render=render
第二個this.mount()方法，這個方法首先會重新獲取el，因為如果是運行時版本的話，是不會走entry-runtime-with-compiler.js這個入口中獲取el，所以如果是運行時版本的話，我們會在runtime/index.js的$mount()中重新獲取el。
- src\platforms\web\runtime\index.js
- mountComponent()
- 接下來調(diào)用mountComponent(),mountComponent()是在src/core/instance/lifecycle.js中定義的，在mountComponent()中，首先會判斷render選項，如果沒有render，但是傳入了模板，并且當(dāng)前是開發(fā)環(huán)境的話會發(fā)送警告，警告運行時版本不支持編譯器。接下來會觸發(fā)beforeMount這個生命周期中的鉤子函數(shù)，也就是開始掛載之前。
- 然后定義了updateComponent()，在這個方法中，定義了_render和_update，_render的作用是生成虛擬DOM，_update的作用是將虛擬DOM轉(zhuǎn)換成真實DOM，并且掛載到頁面上來。
- 再接下來就是創(chuàng)建Watcher對象，在創(chuàng)建Watcher時，傳遞了updateComponent這個函數(shù)，這個函數(shù)最終是在Watcher內(nèi)部調(diào)用的。在Watcher創(chuàng)建完之后還調(diào)用了get方法，在get方法中，會調(diào)用updateComponent()。
- 然后觸發(fā)了生命周期的鉤子函數(shù)mounted,掛載結(jié)束，最終返回Vue實例。
2、請簡述 Vue 響應(yīng)式原理。
Vue 的響應(yīng)式原理是核心是通過 ES5 的保護對象的 Object.defindeProperty 中的訪問器屬性中的 get 和 set 方法，data 中聲明的屬性都被添加了訪問器屬性，當(dāng)讀取 data 中的數(shù)據(jù)時自動調(diào)用 get 方法，當(dāng)修改 data 中的數(shù)據(jù)時，自動調(diào)用 set 方法，檢測到數(shù)據(jù)的變化，會通知觀察者 Wacher，觀察者 Wacher自動觸發(fā)重新render 當(dāng)前組件（子組件不會重新渲染）,生成新的虛擬 DOM 樹，Vue 框架會遍歷并對比新虛擬 DOM 樹和舊虛擬 DOM 樹中每個節(jié)點的差別，并記錄下來，最后，加載操作，將所有記錄的不同點，局部修改到真實 DOM 樹上。
3、請簡述虛擬 DOM 中 Key 的作用和好處。
在v-for的過程中，為給每一個節(jié)點設(shè)置key屬性的作用：
- 以便它能夠跟蹤每個節(jié)點的身份，在進行比較的時候，會基于 key 的變化重新排列元素順序。從而重用和重新排序現(xiàn)有元素，并且會移除 key 不存在的元素。方便讓 vnode 在 diff 的過程中找到對應(yīng)的節(jié)點，然后成功復(fù)用。
設(shè)置key的好處：
- 可以減少 dom 的操作，減少 diff 和渲染所需要的時間，提升了性能
4、請簡述 Vue 中模板編譯的過程。
- 緩存公共的 mount 函數(shù)，并重寫瀏覽器平臺的 mount
- 判斷是否傳入了 render 函數(shù)，沒有的話，是否傳入了 template ，沒有的話，則獲取 el 節(jié)點的 outerHTML 作為 template
- 調(diào)用 baseCompile 函數(shù)
- 解析器(parse) 將模板字符串的模板編譯轉(zhuǎn)換成 AST 抽象語法樹
- 優(yōu)化器(optimize) - 對 AST 進行靜態(tài)節(jié)點標(biāo)記，主要用來做虛擬DOM的渲染優(yōu)化
- 通過 generate 將 AST 抽象語法樹轉(zhuǎn)換為 render 函數(shù)的 js 字符串
- 將 render 函數(shù) 通過 createFunction 函數(shù) 轉(zhuǎn)換為 一個可以執(zhí)行的函數(shù)
- 將 最后的 render 函數(shù) 掛載到 option 中
- 執(zhí)行 公共的 mount 函數(shù)
