為什么我們要將視圖層提取出來，并單獨關(guān)注它呢？

因為在知乎這種頁面元素數(shù)量多，結(jié)構(gòu)龐大的網(wǎng)頁中，如果像傳統(tǒng)開發(fā)一樣，把數(shù)據(jù)和視圖全部混雜在一起，混雜在 HTML 中，處理起來會非常困難。而且如果其中的幾個結(jié)構(gòu)之間存在一些密不可分的關(guān)系，那么在代碼中就會出現(xiàn)更大的問題。這個是什么問題呢？

還記得當初寫的時候，你是這樣寫的$('#xxx').().().()嗎？當初寫的時候，你以為頁面上的元素不多，只需要找出這個元素的父元素的父元素的父元素，最多在注釋里寫上這個元素的父元素的父元素的父元素就可以了。但如果過幾天你的項目負責人或者產(chǎn)品經(jīng)理突然讓你修改你做的網(wǎng)頁，這個修改要求會影響頁面的結(jié)構(gòu)，也就是DOM的關(guān)聯(lián)和嵌套層級會發(fā)生變化，那么$('#xxx').().().()可能會變成$('#xxx').().().().().()。

這個倒不是大問題，當產(chǎn)品迭代越來越快，修改越來越多，頁面上類似的關(guān)聯(lián)嵌套 DOM 元素不止一個時，修改起來就會非常困難。另外，查找頁面元素的選擇器以及 DOM 操作本身也有性能損耗，打開這個頁面可能會越來越卡，不知道從何下手。

當你在寫項目的時候遇到這種問題，你肯定會抱怨，世界上為什么會有像 HTML 這樣的語言需要無數(shù)個 div 嵌套起來才能做成頁面，像 這樣的語言，為什么當初你因為它的 DOM 操作簡單就去學了，現(xiàn)在卻覺得它根本沒有那么簡單，難道我學的都是假的？寫代碼為什么這么難？你想砸電腦，你想用鍵盤敲打產(chǎn)品狗的頭，怪他天天改需求，讓你原本香噴噴的代碼變得又長又臭。

這時候如果你學會了Vue.js，這些抱怨就不復存在了。

5.為什么Vue.js讓開發(fā)基于Web的前端應用程序變得如此簡單？

因為Vue.js有聲明式、響應式的數(shù)據(jù)綁定，以及基于組件的開發(fā)，而且它還使用了DOM這種聽名字就覺得很高級的技術(shù)。

但是這些名詞是什么？

6. 響應式數(shù)據(jù)綁定

這里的響應式并不是 @media 媒體查詢里的響應式布局，而是指 Vue.js 會自動響應頁面上某些數(shù)據(jù)的變化。至于如何響應，你可以先將下面的代碼粘貼到一個擴展名為 html 的文件中并用瀏覽器打開，在文本框中輸入一些文本，觀察頁面的變化。

你是否發(fā)現(xiàn)一個神奇的現(xiàn)象，即文本框中輸入的文字會隨著后面的p標簽中的內(nèi)容一起發(fā)生變化？

也就是說，p標簽通過{{ }}語法與input標簽中的值進行綁定，如果其中一個發(fā)生變化，則與其綁定的另一個數(shù)據(jù)也會隨之變化。

符合標題，vue.js 會根據(jù)用戶在代碼中預先寫好的綁定關(guān)系，自動響應數(shù)據(jù)的變化，修改所有綁定的數(shù)據(jù)和視圖內(nèi)容。這個綁定關(guān)系在圖中就是用 input 標簽的 v-model 屬性來聲明的，所以你可能也會在其他地方看到有人粗略地把 vue.js 稱為聲明式渲染模板引擎。

7.基于組件的開發(fā)

還記得在傳統(tǒng)的前端開發(fā)中，我們每個人都做一個頁面，然后最后放到各種后端模板引擎中，比如PHP或者Java JSP等等。

但現(xiàn)在我們做的是單頁應用，頁面交互和結(jié)構(gòu)非常復雜，一個頁面要寫的模塊非常多，往往一個模塊的代碼量和工作量就非常大。如果還是按照原來的方式來開發(fā)，會很累。而且以后如果產(chǎn)品需求有變，修改起來也很麻煩，生怕移動了一個div之后sublime text vue插件，其他的div也跟著移動，整個頁面就亂了，或者由于事件冒泡機制，修改了某些內(nèi)層DOM事件處理函數(shù)之后，會出現(xiàn)各種莫名奇妙的bug。

在面向?qū)ο缶幊讨?，我們可以運用面向?qū)ο蟮乃枷?，把各個模塊打包成類或者把一個大的業(yè)務模塊拆分成更多更小的類；在過程化編程中，我們也可以將一些大的功能拆分成很多個功能，分配給不同的人去開發(fā)。

在前端應用中，我們是否也能像編程一樣，進行模塊封裝呢?這就引入了基于組件的開發(fā)的思想。

Vue.js 利用組件將單頁應用中的各個模塊拆分成單獨的組件（）。我們只需要在父應用中先寫好各個組件標簽（占坑），在組件標簽中寫好需要傳入組件的參數(shù)（就像給函數(shù)傳遞參數(shù)一樣，這個參數(shù)叫做組件的屬性），然后再分別寫好各個組件的實現(xiàn)（填坑），整個應用就完成了。

8. DOM

如今網(wǎng)速越來越快，很多人家里都有幾十甚至幾百兆的光纖，手機也從4G開始。理論上一個網(wǎng)頁也就幾百KB，而瀏覽器本身會緩存很多的資源文件。那么為什么打開一個之前打開過并且已經(jīng)緩存的頁面會感覺這么慢呢？這是因為瀏覽器本身在處理DOM方面存在性能瓶頸。特別是在傳統(tǒng)開發(fā)中，當使用或者原生的DOM操作函數(shù)頻繁操作DOM時，瀏覽器要不斷渲染新的DOM樹，導致頁面看起來非?？D。

DOM 是英文虛擬 DOM，簡單來說，就是一種可以通過預先進行各種計算來計算和優(yōu)化的 DOM 操作。由于這種 DOM 操作屬于預處理操作，并不真正操作 DOM，所以被稱為虛擬 DOM。最終 DOM 操作在計算完成后才真正提交，DOM 操作變化才會反映到 DOM 樹中。

業(yè)界目前對 vue.js 的 DOM 褒貶不一。有人認為，作為輕量級框架，Vue.js 引入 DOM 會增加 Vue.js 本身的代碼大小，而且會消耗更多的 CPU（在手機上更耗電）（注意：消耗更多的 CPU 并不代表更卡頓，因為計算是在后臺進行的，它的計算量不足以讓 DOM 操作變得卡頓），而且在操作單個 DOM 元素時，多了一個計算過程，會比較慢。不過也有人認為，基本上使用 Vue.js 開發(fā)頁面中內(nèi)容很多的元素，DOM 操作量肯定普遍比較大，所以平均下來還是比較劃算的。

9.如何使用Vue.js開發(fā)單頁應用？

說了這么多，我還是不知道怎么用它做出像知乎那樣的頁面，怎么學呢？

前面我們看了一個響應式數(shù)據(jù)綁定的例子，只是一個DEMO，好像沒有什么實際意義，離真正的單頁應用還差得很遠，怎么才能用它來開發(fā)真正的項目呢？

我的建議是先看Vue.js官方文檔的基礎(chǔ)，除了組件部分涉及到很多比較生僻的術(shù)語外，前面幾章完全是把Vue.js當做模板引擎來用的。

然后開始學習NPM和Vue-Cli的基本使用，最好對Node.js有一定的了解。

最后，先大致看一下組件部分，理解了組件里面的概念之后，開始看網(wǎng)上各種實用的視頻和文章，以及別人的開源代碼。

10. 你之前提到過幾次，這是什么？

這兩個名字聽起來很相似，難道它們之間有某種關(guān)聯(lián)嗎？

是的，你猜對了，他們之間確實有著很深的聯(lián)系。

引自阮一峰先生：（6入門）

它是新一代的語言。

這里我強烈建議大家在學習的時候參考這本書6入門

11. 我在學習 Vue.js 時經(jīng)常聽到這個。這是什么？

它是一款前端的封裝構(gòu)建工具。如果你之前一直都是手寫 HTML 和 CSS，并且通過 link 標簽將 CSS 導入到自己的 HTML 文件中，通過標簽的 src 屬性導入外部 JS 腳本，那么你肯定會對這款工具感到陌生。沒關(guān)系，我們先了解一下為什么要用它，然后再帶著理由去學習它。

12. 為什么使用

之前提到過，制作單頁應用本身就比較復雜，而且在制作的時候肯定會用到很多素材和其他第三方庫，我們該如何管理這些東西呢？

前面說了它是一個前端打包工具，那為什么要打包前端代碼呢？因為一個單頁應用會用到很多素材，如果每個素材都是通過 HTML 中的 src 屬性或者鏈接引入的，那么在請求一個頁面的時候，瀏覽器可能要發(fā)起十多個請求。而往往請求的資源都是一些腳本代碼或者非常小的圖片，這些資源本身只有幾 KB，下載甚至都用不了 1 秒鐘。但是由于 HTTP 是應用層協(xié)議，它的下層是傳輸層協(xié)議 TCP，TCP 的握手揮手過程可能比下載資源本身還要耗時，所以需要把這些小文件全部打包成一個文件。這樣，只需要一次 TCP 握手揮手過程，就可以下載多個資源。而且由于多個資源共用一個 HTTP 請求，所以頭部等部分也是共用的，相當于形成了規(guī)模效應，使得網(wǎng)頁顯示速度更快，用戶體驗更好。

前面說了還有一個build功能，就不得不提這個新版本了。但是國內(nèi)外還是有很多人使用老版本的瀏覽器，這些瀏覽器是不支持的。那么我們的前端項目怎么才能在這樣的瀏覽器上運行呢？這就需要自動加載一個轉(zhuǎn)換器，把我們寫的東西轉(zhuǎn)換成瀏覽器能夠支持的舊版本的語言。這個轉(zhuǎn)換器的名字叫babel，如果以后大家聽到或者看到這個詞的話，應該知道就是一個到舊版本的轉(zhuǎn)換器。這也是的build功能。當然對前端比較了解的同學還會知道Sass、Less等CSS預處理器。我們也可以通過在中編寫特定的規(guī)則，將這些CSS預處理語言自動轉(zhuǎn)換成普通瀏覽器能夠識別的CSS代碼。

開頭的介紹提到了Vue.js可以使用單文件組件來開發(fā)項目，其實也是通過單文件組件中的模板、樣式和JS來調(diào)用到主頁面的

當然它的功能不止這些，還可以通過安裝各種插件進行擴展，比如熱重載技術(shù)，可以解放鍵盤上的F5鍵，讓我們修改代碼后按Ctrl+S保存，瀏覽器頁面就會自動刷新修改，無需我們手動刷新。還有一些插件可以自動添加注釋，自動在CSS代碼中添加一些瀏覽器內(nèi)核兼容的前綴，比如-xxx。

13.什么是NPM和Node.js？他們之間有什么關(guān)系？

首先說一下 Node.js。我們知道通常情況下，運行環(huán)境就是瀏覽器，因此它的能力僅限于瀏覽器能夠賦予它的權(quán)限。比如讀寫本地系統(tǒng)文件等操作，在瀏覽器中運行的代碼一般是沒有這個權(quán)限的。如果我們想寫一些可以在操作系統(tǒng)上運行，并且具備 PHP、JAVA 等編程語言功能的程序怎么辦？Node.js 就解決了這個問題。Node.js 是一個服務器端的運行環(huán)境，使用 Node.js 可以編寫獨立的程序。之前我們提到過，它是用 Node.js 編寫的，所以作為前端開發(fā)者，就算你不使用 Node.js 編寫獨立的程序，也得有一個 Node.js 的運行環(huán)境，畢竟很多前端工具都是使用它編寫的。

npm是node.js的包管理器，傳統(tǒng)開發(fā)中我們大多在百度上搜索.js，然后去官網(wǎng)下載，或者直接導入CDN資源，這種方式太麻煩了，如果以后遇到其他包，這個包的代碼可能還會調(diào)用其他包（也就是這個包和其他包有依賴）sublime text vue插件，那么我們在自己的項目中引入一個包就會變得非常困難?，F(xiàn)在我們有了包管理器npm，可以直接通過

按照以下方式介紹，例如

該包會自動導入到當前項目文件夾中，并且 npm 會自動下載 vue 包所依賴的其他包。

至于有些人按照網(wǎng)上的npm教程配置時掉坑，發(fā)現(xiàn)下載速度很慢或者根本下載不了，這在國內(nèi)是眾所周知的原因，網(wǎng)上有各種解決這個問題的方案，大家要好好利用搜索引擎。

前面說了可以安裝各種插件來擴展功能，其實這就是它的擴展方式。

如果你學過 PHP，NPM 和 PHP 類似，也和 yum、apt-get 類似。

14.什么是Vue-CLi？

它是vue.js的腳手架工具，簡單來說就是一個自動幫你生成項目目錄、配置、各種依賴包的工具，可以使用

最后的-g是全局安裝的意思，也就是打開命令行后直接通過vue命令就可以調(diào)用。

15.我應該學習Vue.js嗎？

目前 Vue.js 的發(fā)展勢頭和作者支持都非常好，而且中文資料和教程也非常豐富，現(xiàn)在你打開幾個知乎前端開發(fā)相關(guān)的專欄，基本都能看到相關(guān)文章，社區(qū)也很活躍。

是否應該學取決于你自己。如果你目前只在做以內(nèi)容展示為主的項目，或者整天用各種 CMS 搭建網(wǎng)站，并且不打算以后換一份更好的工作，那么你暫時可以不用學它。如果你開發(fā)的項目交互比較多，而且前后端開發(fā)人員都對前后端分離有清晰的認識，那么你可以大膽地學習它，并運用到實際項目中。

16.Vue.js 為何變得如此流行？

這個問題網(wǎng)上有很多種說法，個人覺得主要是這幾年前端變化太快了，近一年來Vue.js+的組合已經(jīng)逐漸穩(wěn)定，而且已經(jīng)有不少中文資料了。

與競爭對手相比，該項目的新舊版本無法平滑升級，而且變化太大，讓用戶感到不安。

React 本身主流推薦的是 JSX，這需要學習一門額外的語法（什么？學 Vue.js 也要學它？現(xiàn)在是個潮流，不只是因為 Vue.js），而且 React 本身采用的寫法是寫模板代碼，這讓很多習慣使用后端模板引擎的人感覺不適應。現(xiàn)在看來 React 本身在國內(nèi)一些論壇社區(qū)中并不像 Vue.js 那么受歡迎。

當然并不是說除了 Vue.js 之外其他框架就不好，比如知乎新版也是用 React 開發(fā)的，它們還是有各自的優(yōu)勢的，大家可以深入研究后自己判斷。

17. 我在很多地方也看到 Vuex 和 Vue-route。它們是什么？

Vuex 是 vue 的狀態(tài)管理器，用于集中管理單頁應用中的各種狀態(tài)。

vue-route是vue的一個前端路由器，這個路由器可不是我們上網(wǎng)用的路由器，而是一個管理請求入口到頁面映射關(guān)系的東西，它可以在不刷新的情況下替換頁面的部分內(nèi)容，讓用戶感覺好像切換到了一個網(wǎng)頁一樣。

這兩點要說清楚的話會占用很多篇幅，這里就簡單提一下，最重要的是先學好vue.js。

18.我在一些地方還看到了Vue和Axios，它們是什么？

傳統(tǒng)的前后端不分離的開發(fā)，后端都是通過模板引擎直接把數(shù)據(jù)拼接到返回的HTML中，而現(xiàn)在的單頁應用開發(fā)都是前后端分離的，所以單頁應用中的數(shù)據(jù)必須通過ajax來獲取，并通過ajax提交給后端。

在傳統(tǒng)開發(fā)中我們都是手動或者通過ajax的方式提交和獲取數(shù)據(jù)。

vue.js本身并沒有封裝ajax操作庫，所以我們要通過Vue-Axios來進行ajax操作，由于種種原因，現(xiàn)在vue.js2.0已經(jīng)使用axios作為官方推薦的ajax庫。

19.我應該學習 Vue.js 2.0 還是 1.0？

現(xiàn)在很多框架和語言都是學新東西而不是學舊東西（這個正在逐漸成為一種趨勢），所以如果你不是在維護舊項目的話，絕對建議學習 Vue.js2.0。而且學完 Vue.js2.0 之后，再學 Vue.js1.0 也不是什么難事。

20.編寫Vue.js用什么開發(fā)工具和計算機？

前端開發(fā)基本上不需要很高端的電腦，這個時代，只要有編輯器的電腦就可以做前端開發(fā)。

Vue.js 組件文件本質(zhì)上就是普通的代碼文件，所以各種編輯器加上一些語法檢查插件就夠了。我自己用的是 text 3，安裝一些插件之后可以實現(xiàn) .vue 單文件組件代碼高亮和各種自動補全。 里面也有類似的插件，大家可以按照網(wǎng)上各種教學文章的指導來配置環(huán)境。

我使用的主題是，在大多數(shù)顯示器上長時間觀看都不會傷眼。我用的顯示器是LG，有些顯示器有亮度和色階調(diào)節(jié)。我調(diào)節(jié)到2.0左右感覺比較舒服。太低會導致底部的棕色背景變黑，對比度更大，比較累。太高會導致對比度不足，畫面發(fā)白，影響色彩調(diào)節(jié)。

結(jié)論：

包括我在內(nèi)的很多人在看到 Vue.js 神奇的雙向綁定優(yōu)雅寫法時可能非常驚嘆，看到中文文檔發(fā)布后更是有種立馬想學的沖動?？上Т笄岸诉€是大前端，如果不深入了解前端的方方面面，想一步登天，那絕對配不上大前端的“大”字。原本只是想學 Vue.js，沒想到以后還要學配置、配置、bable 配置、npm 使用、node.js 語法，以及 vue 全家桶里的 vuex、vue-route 等等。前段時間網(wǎng)上流傳著一個叫配置工程師的職位，由此可見想要了解前端這個大雜燴，不是那么容易的。大家加油，有問題可以在評論區(qū)回復，謝謝大家的支持！

如有侵權(quán)請聯(lián)系刪除！