最近身邊學(xué)習(xí) Vue 的人也越來越多了，大家都有很多的疑問，為什么前端要用框架、Vue 做了些什么、要怎么上手，等等。距離上一次寫 Vue 也過去三年了，是時候再把這三年自己的理解再整理進(jìn)去了。由于這個系列主要是希望寫給可能前端掌握也不深的人，所以會鋪墊一些自己認(rèn)為需要的內(nèi)容，本節(jié)先來講講入門前端，作為鋪墊，來理解 Vue 這個框架吧。

前端頁面解析

頁面組成

我們打開一個前端項目，經(jīng)常會看到很多不同后綴的文件，例如一個頁面可能包括a.html、a.css、a.js，用了 Vue 還有a.vue，再加上 Typescript 可能還有a.ts。

相信有些沒寫過前端的開發(fā)們是有點崩潰的，我們先來分別看看一個前端頁面都是由什么組成的。其實最終跑在瀏覽器中的代碼，主要包括三種：HTML、CSS、Javascript。

HTML

直接從代碼說起，最簡單的莫過于：

這里面包括兩個子?？欤?/p>

：常包括控制樣式的標(biāo)簽、控制瀏覽器特殊邏輯的標(biāo)簽、控制代碼執(zhí)行邏輯的

通常來說，一段 HTML 代碼，最終在瀏覽器中會生成一堆 DOM 節(jié)點樹，例如：

這段代碼在瀏覽器中渲染時，其實是長這個樣子的：

這不一定是最終的結(jié)果，因為我們還可以這樣操作：

1.通過 CSS 樣式，例如display: none來讓其中某個節(jié)點消失。

2.通過 JS 代碼操作 DOM，例如使用document.getElementById獲取到某個節(jié)點元素，然后再通過設(shè)置.innerHTML來改變元素的內(nèi)容。

CSS

CSS 主要是給我們的 HTML 元素添加樣式，可以通過幾個方式匹配:

DOM 元素匹配：例如p{color: red}會讓所有

元素的文字都變成紅色

class 匹配：類的匹配，例如.color-red{color: red}會讓所有元素的文字都變成紅色

id 匹配：id標(biāo)識符的匹配，例如#color-red{color: red}會讓元素的文字都變成紅色（若頁面內(nèi)有多個相同的 id，則只有第一個生效）

CSS 的調(diào)試和編寫上手不簡單，會需要很多的踩坑和練習(xí)，它也不像 JS 那樣可以完全根據(jù)語法或是邏輯理解，總有兼容性會顛覆你之前的認(rèn)知。不過 CSS 寫好了，對寫頁面的效率會有很大的提升。

Javascript

HTML 是簡單的網(wǎng)頁靜態(tài)信息，而 JavaScript 可以在網(wǎng)頁上實現(xiàn)復(fù)雜的功能。

我們常常使用 Javascript 來做以下事情：

處理事件（點擊、輸入等）

改變 HTML 內(nèi)容、位置和樣式

處理 Http 請求、各種業(yè)務(wù)邏輯的執(zhí)行

很多其他的事情也可以做

Javascript 是單線程的，更多是因為對頁面交互的同步處理。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作 DOM，若是多線程會導(dǎo)致嚴(yán)重的同步問題。

頁面渲染

瀏覽器的渲染機(jī)制

我們現(xiàn)在知道一個頁面的代碼里，主要包括了 HTML、CSS、Javascript 三大塊內(nèi)容，那么瀏覽器是怎么解析和加載這些內(nèi)容的呢？

一次瀏覽器的頁面渲染過程中，瀏覽器會解析三種文件：

CSS 規(guī)則樹與 DOM 結(jié)構(gòu)樹結(jié)合，最終生成一個 Render 樹（即最終呈現(xiàn)的頁面，例如其中會移除 DOM 結(jié)構(gòu)樹中匹配到 CSS 里面display:none的 DOM 節(jié)點）。一般來說瀏覽器繪制頁面的過程是：

1.計算 CSS 規(guī)則樹。

2.生成 Render 樹。

3.計算各個節(jié)點的大小/position/z-index。

4.繪制。

頁面的局部刷新

一般看來，瀏覽器生成了最終的 Render 樹，頁面也已經(jīng)渲染完畢，似乎瀏覽器已經(jīng)完成了它的工作了。但現(xiàn)實中我們的頁面更多的不只是靜態(tài)的頁面，還會包括點擊、拖拽等事件操作，以及接口請求、數(shù)據(jù)渲染到頁面等動態(tài)的交互邏輯，這時候我們會需要更新頁面的信息。

我們的業(yè)務(wù)代碼中情況會復(fù)雜得多，除了插入內(nèi)容，還包括內(nèi)容更新、刪除元素節(jié)點等。不管是那種情況，目前來說前端一般分為兩種方式：

1.綁定映射表方式。

2.直接替換內(nèi)容方式。

1. 綁定映射表方式

這其實是挺經(jīng)常使用的一種方式，例如下面這段代碼：

這里拿到了的這樣一個元素映射，我們在更新內(nèi)容、處理節(jié)點的時候就可以用這個映射來直接操作，如：

如果我們一個頁面里需要綁定變量的元素很多，那每次要更新某塊的頁面數(shù)據(jù)，可能會需要保存很多的元素映射，同時需要調(diào)用很多很多的createElement()/appendChild()/removeChild()這類方法，也是個不小的開銷。這種情況下，我們可以使用直接替換內(nèi)容的方式。

2. 直接替換內(nèi)容方式

我們每次更新頁面數(shù)據(jù)和狀態(tài)，還可以通過innerHTML方法來用新的HTML String替換舊的，這種方法寫起來很簡單，無非是將各種節(jié)點使用字符串的方式拼接起來而已。

例如，上面的幾次更新 a 元素節(jié)點，可以調(diào)整成這樣實現(xiàn)：

這種方式來更新頁面簡單粗暴，但是如果我們更新的節(jié)點范圍比較大，這時候我們需要替換掉很大一片的HTML String。這種情況下，會面臨著可能導(dǎo)致更多的瀏覽器計算。

頁面回流、重繪

前面也介紹了，瀏覽器繪制頁面的過程是：1.計算CSS規(guī)則樹 => 2.生成Render樹 => 3.計算各個節(jié)點的大小/position/z-index => 4.繪制。其中計算的環(huán)節(jié)也是消耗較大的地方。

我們使用 DOM API 和 CSS API 的時候，通常會觸發(fā)瀏覽器的兩種操作：Repaint（重繪） 和 Reflow（回流）：

回流的花銷跟render tree有多少節(jié)點需要重新構(gòu)建有關(guān)系，這也是為什么前面說使用innerHTML會導(dǎo)致更多的開銷。所以到底是使用綁定映射表方式，還是使用直接替換內(nèi)容方式，都是需要具體問題具體分析的。

事件驅(qū)動

事件驅(qū)動其實是前端開發(fā)中最容易理解的編碼方式，例如我們寫一個提交表單的頁面，用事件驅(qū)動的方式來寫的話，會是這樣一個流程：

1.編寫靜態(tài)頁面

2.給對應(yīng)的元素綁定對應(yīng)的事件。例如給 input 輸入框綁定輸入事件：

3.事件觸發(fā)時，更新頁面內(nèi)容

以上這個流程，是很常見的前端編碼思維，我們稱之為事件驅(qū)動模式。

前端思維轉(zhuǎn)變

很多人不理解這幾年來前端的變化，為什么不能再用 jQuery 統(tǒng)一天下呢？為什么要搞那么多的庫，還要按照環(huán)境呢？不是用個 txt 編輯器就能寫完一個頁面嗎，前端弄那么復(fù)雜是為了什么呢？

既然稱之為思維轉(zhuǎn)變，那么可以將事件驅(qū)動的思維模式作為過去常見的一種方式，而如今的前端開發(fā)過程中，多了很多的新框架、新工具，還有了工程化，這些帶來了怎樣的思維模式的轉(zhuǎn)變呢？

前端框架的出現(xiàn)

其實最初是 AngularJS 開始占領(lǐng)了比較多的地位，后面 React 迎面趕上，在 Angular 斷崖升級的幫助下，Vue 結(jié)合了各種框架的優(yōu)勢，以及非常容易入門的文檔，成功成為了那一匹黑馬。既然這一系列寫的是 Vue 的入門和使用，那這里當(dāng)然是基于 Vue 來介紹了。

Vue 文本插值

在 Vue 中，最基礎(chǔ)的模板語法是數(shù)據(jù)綁定，例如：

這里綁定了一個 msg 的變量，開發(fā)者在 Vue 實例 data 中綁定該變量：

最終頁面展示內(nèi)容為

測試文本

數(shù)據(jù)綁定的實現(xiàn)
這種使用雙大括號來綁定變量的方式，我們稱之為數(shù)據(jù)綁定。它是怎么實現(xiàn)的呢，數(shù)據(jù)綁定的過程其實不復(fù)雜：

上述這個過程，是模板引擎在做的事情。我們來看看上面在 Vue 里的代碼片段，我們可以解析后獲得這樣一個 AST 對象：

這樣，我們在生成一個 DOM 的時候，同時添加對data的監(jiān)聽，數(shù)據(jù)更新時我們會找到對應(yīng)的nodeIndex，更新值：

虛擬 DOM

虛擬 DOM 如今已經(jīng)被作為前端面試基礎(chǔ)題了，多多少少面試者都要去了解下，當(dāng)初 React 就是因為虛擬 DOM 的提出，暫時贏下了瀏覽器性能之爭。當(dāng)然，這都是幾年前的事情了，如今幾大框架的性能問題，早也不是什么大問題了。

虛擬 DOM 大概是這么個過程：

(1) 用 JS 對象模擬 DOM 樹，得到一棵虛擬 DOM 樹。

(2) 當(dāng)頁面數(shù)據(jù)變更時，生成新的虛擬 DOM 樹，比較新舊兩棵虛擬 DOM 樹的差異。

(3) 把差異應(yīng)用到真正的 DOM 樹上。

為什么要用到虛擬 DOM 呢？這是因為一個 DOM 節(jié)點它包括了太多太多的屬性、元素和事件對象，感覺有上百個。但是我們并不是全部都會用到，通常包括節(jié)點內(nèi)容、元素位置、樣式、節(jié)點的添加刪除等方法，而我們通過用 JS 對象表示 DOM 元素的方式，大大降低了比較差異的計算量。

虛擬 DOM 中，差異對比也是很關(guān)鍵的一步，這里簡單說一下。當(dāng)狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進(jìn)行比較，記錄兩棵樹差異。通常來說這樣的差異需要記錄：需要替換掉原來的節(jié)點、移動、刪除、新增子節(jié)點、修改了節(jié)點的屬性、 對于文本節(jié)點的文本內(nèi)容改變。經(jīng)過差異對比之后，我們能獲得一組差異記錄，接下里我們需要使用它。

如圖，這里我們對比兩棵 DOM 樹，得到的差異有：p 元素插入了一個 span 元素子節(jié)點，然后原先的文本節(jié)點挪到了span 元素子節(jié)點下面，最后通過 JS 操作就可以實現(xiàn)完。

XSS 漏洞
模板引擎還可以協(xié)助預(yù)防下 XSS 相關(guān)漏洞。我們知道，XSS 的整個攻擊過程大概為：

避免 XSS 的方法之一主要是將用戶所提供的內(nèi)容進(jìn)行過濾，而大多數(shù)模板引擎會自帶 HTML 轉(zhuǎn)義功能。在 Vue 中，默認(rèn)的數(shù)據(jù)綁定方式（雙大括號、v-bind等）會進(jìn)行 HTML 轉(zhuǎn)義，將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。

當(dāng)然，如果你一定要輸出 HTML 代碼，也可以使用v-html指令輸出。官方文檔也有特殊說明：

Vue簡介

看看這些模板引擎都做了啥事，原本就是一個

，經(jīng)過 AST 生成一個對象，最終還是生成一個

，這是多余的步驟嗎？不是的，在這個過程中我們可以實現(xiàn)一些功能：

·排除無效 DOM 元素，并在構(gòu)建過程可進(jìn)行報錯

·使用自定義組件的時候，可匹配出來

·可方便地實現(xiàn)數(shù)據(jù)綁定、事件綁定等，具備自動更新頁面的功能

·為虛擬 DOM Diff 過程打下鋪墊

·HTML 轉(zhuǎn)義（預(yù)防 XSS 漏洞）

所以 Vue 它只是一個模板引擎嗎？怎么說呢，模板引擎可能是我們選擇框架的原因里最重要的一個，畢竟如果沒有框架的話，所有上述這些很好用的能力都需要自己搭建，不然開發(fā)效率會很受影響。

我們看看 Vue 官方的介紹：

數(shù)據(jù)驅(qū)動

前面也介紹了，在 jQuery 年代，我們通常是使用事件驅(qū)動的模式去進(jìn)行開發(fā)了。那么使用了 Vue 之后，寫代碼的方式會有哪些不一樣嗎？

既然前面介紹了事件模型一般的編碼流程，我們再來看看，同樣的們寫一個提交表單的頁面，用數(shù)據(jù)驅(qū)動的方式來寫的話，會變成這么一個流程：

1:設(shè)計數(shù)據(jù)結(jié)構(gòu)。

2:把數(shù)據(jù)綁定到頁面中需要使用/展示的地方

3.事件觸發(fā)時，更新數(shù)據(jù)。

我們在設(shè)置數(shù)據(jù)（this.name = event.target.value）的時候，Vue 已經(jīng)替我們把將數(shù)據(jù)更新到頁面的邏輯處理了。大家也可以去 codepen 或者 jsfiddle、stackblitz 這些在線編碼網(wǎng)站上嘗試下。

所以事件驅(qū)動和數(shù)據(jù)驅(qū)動一個很重要的區(qū)別在于，我們是從每個事件的觸發(fā)開始設(shè)計我們的代碼，還是以數(shù)據(jù)為中心，接收事件觸發(fā)和更新數(shù)據(jù)狀態(tài)的方式來寫代碼。

頁面編寫

如果要問，vue 和 jQuery 有什么不一樣？其實它們從定位到設(shè)計到實現(xiàn)上都完全不一樣，但是對開發(fā)者來說，我們可以做個簡單直觀的區(qū)別：

當(dāng)我們在 Vue 中，模板引擎幫我們處理了模板渲染、數(shù)據(jù)綁定的過程，我們只需要知道這里面只有一個有效數(shù)據(jù)，即輸入框的值。

頁面抽象

既然使用了數(shù)據(jù)驅(qū)動，那么對頁面的一個抽象能力也是很重要的。例如我們現(xiàn)在要寫一個列表，數(shù)據(jù)從后臺獲取到之后，展示到頁面中。

1. 當(dāng)我們需要渲染成列表時:

2.當(dāng)我們需要更新一個列表中某個 id 的其中一個數(shù)據(jù)時（這里需要更改 id 為 3 的 name 值）：

在使用數(shù)據(jù)驅(qū)動的時候，模板渲染的事情會交給框架去完成，我們需要做的就是數(shù)據(jù)處理而已。那么轉(zhuǎn)換了數(shù)據(jù)驅(qū)動之后，有什么好處呢？

當(dāng)我們把一個頁面抽象成數(shù)據(jù)來表示之后，可以做的事情就多了。如果我們把所有的頁面、組件、展示內(nèi)容和接口配置等都變成了配置數(shù)據(jù)，那么我們就可以把所有的東西都進(jìn)行配置化。

前端工程化

其實前端工程化這塊，我并不是能理解得很深刻，能講給大家的，應(yīng)該只是自己的一種理解了。一般來說，現(xiàn)在的主流構(gòu)建工具應(yīng)該是 Webpack，包括我們使用 Vue 官方腳手架生成的代碼，構(gòu)建工具也是 Webpack。

我們在代碼中會使用到很多的資源，圖片、樣式、代碼，還有各式各樣的依賴包，而打包的時候怎么實現(xiàn)按需分塊、處理依賴關(guān)系、不包含多余的文件或內(nèi)容，同時提供開發(fā)和生產(chǎn)環(huán)境，包括本地調(diào)試自動更新到瀏覽器這些能力，都是由 Webpack 整合起來的。

npm 依賴包

要實現(xiàn)工程化，前端開發(fā)幾乎都離不開 nodejs 的包管理器 npm，比如前端在搭建本地開發(fā)服務(wù)以及打包編譯前端代碼等都會用到。在前端開發(fā)過程中，經(jīng)常用到npm install來安裝所需的依賴.

為什么會有 npm 包的出現(xiàn)呢？因為一個人的力量是有限的，我們在寫代碼的時候，為了可以將注意力集中到業(yè)務(wù)開發(fā)中，會需要使用別人開源的很多工具、框架和代碼包。在很早以前，我們是一個個地下載，或是通過的方式去引用。

當(dāng)一個網(wǎng)站依賴的代碼越來越多，其實管理依賴和版本是一件很麻煩的事情。然后 npm 就出現(xiàn)了，作為一個把這些代碼集中到一起來管理的工具。

同時，我們可以結(jié)合一些 tree shaking 的能力，在本地構(gòu)建的時候，把使用的別人的依賴包里沒用用到的部分去掉，減小代碼包的大小等。

在安裝 Node.js 的時候，npm 的能力也會一塊提供到，按照完之后就能直接在機(jī)器終端使用npm install xxx這種能力啦，需要安裝什么依賴包呢，你可以去npmjs官網(wǎng)搜一下。

vue cli
通常來說，腳手架可以讓你快速地生成示例代碼、搭建本地環(huán)境，也可以更新依賴的版本等，避免了每個開發(fā)者自行調(diào)整開發(fā)環(huán)境、打包邏輯等配置。
Vue cli 也提供了這樣的能力，更多的可以參考官方文檔。

使用方式很簡單：

生成之后的代碼目錄是這樣的：

啟動項目

一般來說，項目會有個 README.md 文件，你能看到一些簡單的說明，例如這里生成的：

yarn 跟 npm 都是差不多的包管理器，區(qū)別在于 yarn 在安裝時會速度更快（并行、離線等），以及版本統(tǒng)一管理的比較好。但如果你不是有特殊的喜好或者習(xí)慣，其實兩個都可以用，例如這里的yarn run serve也可以用npm run serve來運行。

如果有些習(xí)慣不好的項目缺了 README，這種時候要怎么去啟動一個項目呢？可以查看package.json文件：

一般來說，開發(fā)環(huán)境是dev、serve等，生產(chǎn)環(huán)境是build，scripts里是一些任務(wù)，運行命令npm run taskName就可以啟動了。

上圖中，我們可以看到任務(wù)已經(jīng)啟動了，訪問輸出的地址（這里是http://localhost:8080/或者h(yuǎn)ttp://10.40.120.53:8080/）就能看到我們的項目跑起來了。

第一 part 結(jié)束了，更多的內(nèi)容還是前端相關(guān)。這些主要是這幾年對頁面渲染的一些新的理解，然后簡單用腳手架啟動了個 demo 項目。內(nèi)容是按照自己覺得較清晰的邏輯展開來講的，如果說你有更好的想法，或是發(fā)現(xiàn)我的描述中有哪些不到位的地方，也十分歡迎來交流。

工具始終是工具沒錯，但一個工具為什么受這么多人追捧，它到底解決了什么，你可以從中學(xué)習(xí)到什么，這些才是個人認(rèn)為的在使用工具時候收獲的很重要的東西。在 Vue 官方文檔很完善的情況下，我來給你們補(bǔ)上文檔以外的一些技巧和內(nèi)容吧。