為什麼用vue.js，為什麼前端開發46%的人都在用？-js教程-PHP中文網

為什麼用vue.js，為什麼前端開發46%的人都在用？

一句話總結：用資料綁定的思想，vue可以簡單寫單一頁面，也可以寫一個大的前端系統，也可以做手機app的介面。

1、Vue.js是什麼？

　●　漸進式框架

　●　自底向上增量開發的設計

　●　易學習

　●　易整合

##Vue.js（發音/vju?/, 類似view）是一套建構使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心庫只專注於視圖層，而且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單文件元件和 Vue 生態系統支援的庫開發的複雜單頁應用。

【推薦課程：vuejs教學】

#2、vue.js到底適合做哪一種類型的介面？

a、表單項目繁多

b、內容需要根據使用者的操作進行修改

Vue.js就是一個用來建立類似網頁版知乎這種表單項目繁多，且內容需要根據使用者的操作進行修改的網頁版應用。

3、單頁應用程式（SPA）是什麼？

一個頁面就是應用（子應用）

顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用程式。單頁應用程式中一般互動處理非常多，而且頁面中的內容需要根據使用者的操作動態變化。

4、前面說的網頁版知乎我也可以用JQuery寫啊，為什麼要用Vue.js呢？

a、產品是絕對需要重複修改的

b、修改可能會導致DOM的關聯與嵌套層次要改變從而使jquery結構相關程式碼變的異常複雜

c、vue.js可以解決這個問題

你是否還記得你當初寫JQuery的時候，有寫過('#xxx').parent().parent ().parent()這種代碼呢？當你第一次寫的時候，你覺得頁面元素不多，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在註釋裡面寫清楚這個元素的爸爸的爸爸的爸爸不就好了。但萬一過幾天之後你的專案組長或是你的產品經理突然對你做的網頁提出修改要求，這個修改要求將會影響頁面的結構，也就是DOM的關聯與嵌套層次要改變，那麼('#xxx').parent().parent().parent()可能就會變成$('#xxx').parent().parent().parent().parent().parent( )了。

這還不算什麼，等以後產品迭代越來越快，修改越來越多，而且頁面中類似的關聯和嵌套DOM元素不止一個，那麼修改起來將非常費力。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有效能損失的，可能到時候打開這個頁面，會變得越來越卡，而你卻無從下手。

這時候如果你學過Vue.js，那麼這些抱怨將不復存在。

5、前端裡面常說的視圖層是什麼？

我們把HTML中的DOM就可以跟其他的部分獨立開來分割出一個層次，這個層次就叫做視圖層。

Vue 的核心庫只關注視圖層

6、使用jquery開發完整頁面的流程？

a、html寫構架

b、css裝飾

c、js互動

講到JQuery，就不得不說到JavaScript的DOM操作了。如果你用JQuery來開發一個知乎，那麼你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結構了。

現在我們把一個網頁應用抽像一下，那麼HTML中的DOM其實就是視圖，一個網頁就是透過DOM的組合與嵌套，形成了最基本的視圖結構，再透過CSS的修飾，在基本的視圖結構上「化妝」讓他們看起來更加美觀。最後涉及到互動部分，就需要用到JavaScript來接受使用者的互動請求，並且透過事件機制來回應使用者的互動操作，並且在事件的處理函數中進行各種資料的修改，比如說修改某個DOM中的innerHTML或innerText部分。

7、Vue.js為什麼能讓基於網頁的前端應用程式開發起來這麼方便？

a、有宣告式

b、響應式的資料綁定

c、元件化的開發

d 、Virtual DOM

因為Vue.js有聲明式，響應式的資料綁定，與元件化的開發，並且還使用了Virtual DOM這個看名字就覺得高大上的技術。

8、vue.js中常說的資料動態綁定是什麼？

就是vue.js會自動回應資料的變化情況，並且根據使用者在程式碼中預先寫好的綁定關係，對所有綁定在一起的資料和視圖內容都進行修改。而這種綁定關係，在圖上是以input 標籤的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。

9、前端中為什麼要元件化開發？

a、非元件化開發程式碼和工作量都非常大

b、修改起來生不如死

但現在我們做單頁應用，頁面互動和結構十分複雜，一個頁面上就有許許多多的模組需要編寫，而且往往一個模組的程式碼量和工作量就非常龐大，如果還按照原先的方法來開發，那麼會累死人。而且遇到以後的產品需求變更，修改起來也非常麻煩，生怕動了其中一個div之後，其他div跟著雪崩，整個頁面全部亂套，或者由於JavaScript的事件冒泡機制，導致修改一些內層的DOM事件處理函數之後，出現各種莫名其妙的詭異BUG。

10、前端中如何進行元件化開發？

a、借用的後端的物件導向中的模組化想法（把一些大功能拆分成許多函數，然後分配給不同的人來開發）

b、把一個單頁應用程式中的各種模組拆分到一個單獨的元件（component）中，我們只要先在父級應用程式中寫好各種元件標籤（佔坑），並且在元件標籤中寫好要傳入元件的參數（就像給函數傳入參數一樣，這個參數叫做元件的屬性），然後再分別寫好各種元件的實作（填坑）

在物件導向程式設計中，我們可以使用物件導向的想法將各種模組打包成類別或把一個大的業務模組拆分成更多更小的幾個類別。在過程導向程式設計中，我們也可以把一些大功能拆分成許多函數，然後再分配給不同的人來發展。

在前端應用，我們是否也可以像程式設計一樣把模組封裝呢？這就引入了組件化開發的想法。

Vue.js透過元件，把一個單頁應用程式中的各種模組拆分到一個單獨的元件（component）中，我們只要先在父級應用程式中寫好各種元件標籤（佔坑），並且在元件標籤中寫好要傳入元件的參數（就像給函數傳入參數一樣，這個參數叫做元件的屬性），然後再分別寫好各種元件的實作（填坑），然後整個應用就算做完了。

11、為什麼有Virtual DOM技術？

a、問題

現在的網路速度越來越快了，很多人家裡都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會緩存很多資源文件，那麼幾十M的光纖為什麼打開一個之前已經打開過，已經有緩存的頁面還是感覺很慢呢？

b、原因

（1）、瀏覽器本身處理DOM也是有效能瓶頸的

（2）、用JQuery或原生的JavaScript DOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹

這就是因為瀏覽器本身處理DOM也是有效能瓶頸的，尤其是在傳統開發中，用JQuery或原生的JavaScript DOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。

12、Virtual DOM如何實作？

a、預計算dom的各種操作，把最後一次的結果渲染出來（減少dom的渲染次數）

而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先透過JavaScript進行各種計算，把最終的DOM操作計算出來並優化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映在DOM樹上。

13、到底該怎麼用Vue.js做單頁應用程式開發？

其實可以直接看學習影片開始乾，應該是最好的

a、介紹- vue.js官方文件的基礎部分硬著頭皮看一遍

我的建議是，先把介紹- vue.js官方文件的基礎部分硬著頭皮看一遍。除了組件這個小節涉及到了很多晦澀難懂的名詞以外，前面幾章完全就是把Vue.js當作一個模版引擎來用。

b、ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對Node.js也要有所了解

然後開始學習ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對Node.js也要有所了解。

c、看網路上各種實戰影片以及文章還有別人開源的原始碼

最後組件部分先大致看一遍，了解組件裡面都有哪些概念之後，開始看網上各種實戰視頻以及文章還有別人開源的源代碼。

14、ECMAScript是啥？

ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實作（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。日常場合，這兩個詞是可以互換的。

而ECMAScript6就是新一代的JavaScript語言。

15、Webpack是啥？

a、前端打包工具

Webpack是一個前端打包和建置工具。如果你之前一直是手寫HTML，CSS，JavaScript，並且透過link標籤將CSS引入你的HTML文件，以及透過Script標籤的src屬性引入外部的JS腳本，那麼你肯定會對這個工具感到陌生。不要緊，我們先來了解為什麼要用Webpack，然後帶著原因去學習就好了。

16、為什麼要用Webpack？

a、方便管理各種素材

b、打包以便減少瀏覽器的訪問次數

前面說了，做一個單頁應用程式本身就相當複雜，而且在做的時候一定會使用到很多素材和別的第三方函式庫，我們該如何管理這些東西呢？

還有前面講到Webpack了是一個前端打包工具，前端程式碼為什麼要打包呢？因為單頁應用程式中用到很多素材，如果每一個素材都透過在HTML中以src屬性或link來引入，那麼請求一個頁面的時候，可能瀏覽器就要發起十多次請求，往往請求的這些資源都是一些腳本代碼或很小的圖片，這些資源本身才幾k，下載連1秒都不需要，但是由於HTTP是應用層協議，它的下層是TCP這個運輸層協議，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長，所以需要把這些小文件全部打包成一個文件，這樣只要一次TCP握手和揮手的過程，就把多個資源給下載下來了，並且多個資源由於都是共享一個HTTP請求，所以head等部分也是共享的，相當於形成了規模效應，讓網頁展現更快，使用者體驗更好。

17、NPM和Node.js又是什麼？它們是什麼關係？

a、Node.js是一個服務端的JavaScript運行環境

Node.js是一個服務端的JavaScript運行環境，透過Node.js可以實作JavaScript寫獨立程序。

b、Node.js可以寫獨立程式（Webpack就是Node.js寫的）

像我們之前提到的Webpack就是Node.js寫的，所以作為一個前端開發，即使你不用Node.js寫獨立程序，也得配一個Node.js運行環境，畢竟很多前端工具都是用它寫的。

c、NPM是一個node.js的套件管理器（類似java的maven（套件的依賴管理），php也有一個類似的）。

NPM是一個node.js的套件管理器。我們在傳統開發的時候，JQuery.js大多都是百度搜索，然後去官網下載，或是直接引入CDN資源，這種方法太過於麻煩。如果以後遇到其他的包，這個包的程式碼本身可能還調用了其他的包（也稱這個包和其他的那幾個包存在依賴關係），那麼我們要在自己的專案中引入一個包將變得十分困難。現在我們有了NPM這個套件管理器，直接可以透過