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

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

1、Vue.js是什么？

漸進式框架
自底向上增量開發的設計
易學習
易整合
Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。

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這個包管理器，直接可以通過
npm install xxx包名稱
的方式引入它，比如說
npm install vue

18、Vue-CLi是啥？

它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄，配置好Webpack，以及各種依賴包的工具，它可以通過
npm install vue-cli -g
的方式安裝，后面的-g表示全局安裝的意思，意味著你可以打開命令行之后直接通過vue命令調用它。

19、Vuex和Vue-route是什么

Vuex是vue的一個狀態管理器。用于集中管理一個單頁應用程序中的各種狀態。
Vue-route是vue的一個前端路由器，這個路由器不是我們上網用的路由器，而是一個管理請求入口和頁面映射關系的東西。它可以實現對頁面局部進行無刷新的替換，讓用戶感覺就像切換到了網頁一樣。
要講清楚這兩個東西，又得花費大量篇幅，所以這里只是簡單提一下，先學好vue.js本身才是最重要的。