Vue學習「心酸」歷程（連載第一篇）

從事前端開發工作已經有兩年多的時間了，當初剛要入行的時候，就知道，想要做一個合格的程序員，就要不斷地學啊學、學啊學，學到天荒地老，海枯石爛。可是即使我已做好了心理準備，也沒有想到，奶奶的，這前端行業發展的這麼快，分分鐘就出現各種各樣的框架啊。什麼Node、Angular、Vue、React、小程序……瞬間暴汗啊有木有 -_-|||，這對我這麼個學渣來講，太多了好不好。

不過沒辦法，誰讓我已深深入坑了呢，抱著生是前端人死是前端鬼的態度，我就來學學最近比較火爆的Vue吧，據說現在好多面試公司都會問你會不會Vue，為什麼為什麼？很厲害嗎？

開始找資料，首先是官網，滿腦子還是一種聲音：這是什麼？幹嘛用的？好難啊！真心對我來講，看不懂好嘛！！好吧，突然覺得自己真心不是自學的料，找了好多資料，還是沒有深入了解Vue，既然自己看資料不行，那就找課程，花點錢讓別人手把手教總能學會了吧。於是，我就想到了我曾經學前端的培訓機構，他們前一陣子好像剛剛在群里發布了相關的公開課。馬上聯繫客服，可惜了，公開課已經結束了。不過他們告訴我還有錄播哦，也算是不幸中的萬幸吧。於是按照客服的指引，找到了視頻的位置，話不多說，開始看吧。以下就是通過視頻學習後，我對Vue的一些總結，分享給大家一起品嘗吧。

一、Vue是什麼？

官方解釋說，Vue是一套構建用戶界面的漸進式框架，與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。

漸進式框架？來來來，你出來，我保證不打死你，對於小白來講，瞬間懵逼了好嘛！！你就不能說的簡單易懂點嗎？好吧，我承認，搞開發比較愛裝，裝什麼？不說了哈哈

漸進式框架，「漸進」兩個字，畫下重點考試要考。簡單理解就是框架是分層設計的，每層都有不同功能，每層都可選，根據不同的需求選擇不同的接入方案，相對其他框架，使用比較靈活。不用必須使用它的模塊機制，不用必須使用它的依賴注入等等，怎麼樣，是不是聽著就很爽。

用視頻里的話講就是，你需要用到那一塊就用就行了，不需要全部都用上。

附上一張漸進式框架的圖，大家欣賞下。

是不是有些人本來看上文已經理解點了，看了圖，又瞬間懵逼了？有嘛？哈哈，沒關係，真有的話就給我留言，我來把我理解的給你們再說說，不過不保證百分百正確哈。

二、Vue的核心

1、響應的數據綁定

響應的數據綁定就是當數據發生改變的時候自動更新視圖。

這是利用 Object.definedProperty 中的 setter/getter 代理數據來實現監控的。當它發現數據發生改變的時候，就會去更新視圖啦。

最初看到 definedProperty、setter/getter 的時候，就被它給帶跑了，什麼鬼東西，不過在經歷了一通查找後（包括跑他們社區上提問過），我想我現在是搞懂了，或者你們比我懂的多，不用查資料就能明白，那我會嫉妒你！但如果有哪位兄弟姐妹們對這些名詞不太明白的話，你可以問我，我抽時間就回復，就先不在這裡做過多的解釋了。不過我可以告訴大家的是，它不兼容ie8哦，也就是說Vue也不兼容ie8。

2、組合的視圖組鍵

這裡呢就是一個概念性的東西，知道並且記住就ok啦。

ui頁面映射為組建樹，劃分組建可維護、可重用、可測試。

就像老師說的，好想堆積木一樣，一個一個往上放。

我上個圖理解下：

三、虛擬DOM

虛擬DOM這個概念簡單易懂，就和它的字面意思一樣，利用內存生成一個與真實DOM的結構數據一模一樣的DOM，這個內存中生成的DOM就叫做虛擬DOM。

那麼虛擬DOM有什麼用么，這個就要先從真實DOM開始說起啦。我們都只到js的運行速度是非常快的，但是執行中又不可避免的會操作很多頁面上的DOM，這樣就造成了運行速度的減慢。時長在更新數據以後，要重新渲染，包括沒有數據改變的地方，造成了很大程度上的資源浪費。

這個時候，虛擬DOM出現了，當數據發生改變的時候，它能夠通過對比數據，準確的找到數據發生改變的地方，並且針對這個地方進行渲染，以很小的代價完成了DOM操作。

來，我可恥的盜用一下視頻里的圖：

四、Vue的MVVM模式

所謂MVVM模式，就是M（Model數據模型）+V（View視圖模版）+VM（View-Model視圖模型），這個理解起來很簡單，M層就是我們拿到的數據和業務邏輯，V層就是用於數據展示的，VM呢就是處理M和V之間關係用的，所有的臟活累活都是它來乾的。視圖影響數據，數據又影響著視圖，這就是所謂的雙向數據綁定。

再上一張經典的MVVM模式的圖

五、Vue的小例子

好了，上面說了那麼長的概念性的東西了，還不換點料，估計大家就該關頁面了。來來來，都動起手來，我們來敲個簡單的代碼，消化一下上面那些概念。

首先，敲代碼之前我們要幹嘛？沒錯，就是要安裝Vue啊，要不敲半天代碼，誰來處理對不對。Vue網站有獨立版本和NPM的，我們現在只是做做練習，寫點小例子，就下個獨立版本直接用script引入就好啦，等要去做大項目的時候，再去使用NPM安裝吧。

下面開始植入代碼：

首先我們能看到 vm 代碼部分中有個 new Vue，所以 Vue 是通過構造函數來創建的，再往下走，就是Vue需要傳入的選擇對象，對象中包含掛載元素選擇器（el）、代理數據（data）、定義方法（methods）等等，這裡先不說太多，感興趣的可以自己先看看Vue的API文檔哈。

這裡有一點要強調的是，每個Vue實例都會代理其data對象里的所有屬性，這些被代理的屬性是響應的，新添加的屬性不具備響應功能，改變後不會更新視圖。

另外呢，Vue會暴露自身的屬性和方法，以$開頭，來看列印的部分內容：

一、Vue的聲明式渲染

又來又來，又是一個這麼難理解的名稱，什麼是聲明式渲染？簡單理解就是你只要表達出你想做什麼（what）就行了，不需要知道具體是怎麼做的（how）。

而跟聲明式渲染相對應的還有一個叫做命令式渲染，通過聲明式渲染的解釋，是不是應該能猜到什麼是命令式渲染呢？沒錯，和字面意思一樣，你去命令電腦去做事情，具體怎麼做（how），這樣就不管你想做什麼（what），它都會按照你說的去做。

那視頻里的代碼給大家舉個簡單的例子（求數組中每個數字的倍數）：

命令式：

聲明式：

怎麼樣，看完這兩段代碼的對比，瞬間理解了吧。如果你瞬間還沒明白，哈哈，來繼續留言提問吧。

好，這麼看來，Vue就一定是聲明式渲染啦，看<代碼一>里，你只要告訴電腦我要把數據data綁定到對象el上就好了，具體它怎麼找到el的，怎麼把data綁定到el上，都無需知道。

寫了這麼多了，有點累了，連載第一篇就先寫這麼多吧，我還是個小白，這也是我的處女貼，不容易啊，粗茶淡飯，希望大家多捧場，輕拍磚哈(＾－＾)V。

如果有大神覺得我哪裡說的不對的，請留言指教

如果有同樣對Vue感興趣朋友，留言我們一起進步

如果有看完不明白的，也請留言，我一定儘力解答

再次請大家多多支持，謝謝！我會儘快更新的
推薦閱讀：