好程式設計師web前端培訓分享為什麼那麼多人使用vue.js

　　好程式設計師web 前端培訓分享為什麼那麼多人 使 用vue.js 一句話總結：用資料繫結的思想，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 本身才是最重要的。

　　 最後喜歡的小夥伴點個關注、收藏、轉發哦！