Vue簡單瞭解

目錄

• 1. 前端概覽
• 2. 現代前端開發方式
• 3. MVVM開發核心
• 4. Vue核心
• 5. Vue優勢
• 6. Vue難點
• 7. Vue與非Vue項目結合
• 8. Vue調試
• 9. Vue與SEO

---

今天記錄一下最近學習Vue的一點心得。

1. 前端概覽

1.1 前端開發三大件

Html結構，CSS表現，JS行爲。

• 結構其實就是HTML語義化的結果，多個標籤集合，當頁面沒有css,js時還可以保持有層次感的序列視圖。
  能夠在chrome控制檯運行如下代碼，查看只有語義的html結構：

Array.from(document.styleSheets).forEach(item => item.disabled = false)

• 表現可以讓內容更容易讓用戶接受，記住。
  CSS禪意花園
  能夠看到不一樣樣式變化帶來的風格的變化。
• 行爲可以與用戶發生交互，給用戶反饋。
  能夠看看下面網站，不一樣框架庫對todolist的實現。
  Todomvc

1.2 JS角色

前期只是爲了校驗表單，而後發展爲動態效果開發，接着主要負責響應用戶交互，如今頁面數據渲染展現、交互、效果、校驗等多位一體的開發方式。用一張圖表示就這樣的一個關係。

2. 現代前端開發方式

目前流行的前端框架都是基於Node,Npm,Yarn的開發方式，好比Vue結合Vue-cli工具能夠方便的初始化項目，而之前的項目則是手工去新建文件，下載文件，定義項目的入口，而後組織打包方式，而後所有拷貝發佈上線。

2.1 傳統方式

在沒有npm之前，以下的JS資源：

<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/login.js"></script>
<script src="../js/jquery.nicescroll.js"></script>
<script src="../js/jquery.qrcode.min.js"></script>
<script src='../jslib/moment.min.js'></script>
<script src='../js/locale/zh-cn.js'></script>
<script src="../mobisscroll3/js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<script src='../plugins/layer-pc/layer.js'></script>

全部資源插件都須要從本來不一樣的網站去下載，下載好以後放到項目資源目錄中。隨着項目的開發，時間的推移，若是本地源碼被破壞修改，想從新從官網下載，但官網又更新版本了，或者官網已經失聯，下載起來就比較困難。
兩個問題：下載麻煩，版本管理維護比較困難。

2.2 NPM方式

隨着Node在前端工程中大火，後來內置的NPM(Node Package Manager)就扮演了資源統一管理這樣的角色，經過本地的Package.json管理文件名，版本號，命令行進行遠程拉包的方式解決了開發當中處處找資源的窘境，他不但能夠獲取資源，也能夠將本身編寫的包或命令行程序進行發佈分享。
PS: 下載最新的Node安裝包進行安裝，而後分別根據：node -v，npm -v兩個命令測試是否安裝成功。
PS: call:node call:npm

因爲業務需求的不斷增大，Npm下載了不少個包，這些包如何打包就是一個問題了。同時隨着ES6的發佈，而瀏覽器支持又不是給力。有些資源開發時用到，但上線後又用不到，好比SCSS相關的資源。
這時候一個神器Webpack橫空出世，基本解決了前面提到的一些問題，並且還添加了不少新的想法和可能。結合cli工具，使如今的前端開發在工程化領域更加方便，開發更便捷。
其中Babel的劍走偏峯，Webpack-dev-server的巧妙應用，各類Loader的百花齊放，共同構築了現代開發的宏偉基礎世界，關於他們的細節故過後續有機會在分享。

3. MVVM開發核心

Vue是專一於View層的數據雙向綁定框架，核心是MVVM(Model-View-ViewModel) 中的 VM，也就是 ViewModel。ViewModel負責鏈接 View 和Model，保證視圖和數據的一致性，而且可以實時相互更新，數據影響視圖，視圖中操做影響數據。

3.1 數據雙向更新

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

<div>
  <p>Hello，<span id="name"></span></p>
</div>
<script>
var user = {}
Object.defineProperty(user, 'name', {
  get: function () {
    return document.getElementById('name').innerHTML
  },
  set: function (n) {
    return document.getElementById('name').innerHTML = n
  }
})
</script>

這段代碼保存到本地，而後在控制檯裏邊修改一下user的屬性，好比：user.name='shanghai'，看看效果。

而Vue實現有點小複雜，也是面試題必考的環節之一，因此有空的同窗瞭解一下。

1. 實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
2. 實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3. 實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖
4. mvvm入口函數，整合以上三者
   vue 的雙向綁定原理及實現
   vue的雙向綁定原理及實現
   一個github供參考，簡版mvvm庫，仿vue實現雙向綁定基本功能

3.2 數據驅動視圖

經過修改數據來達到更新視圖的目的，好比：const User = { name: 'jikey', age: 20 }，對應頁面上：我是Jikey，修改：User.name = 'Tang'，那頁面上自動變爲：我是Jikey。而若是是jQuery時代，那得先找到dom元素，而後在更新，若是這個屬性頁面上有多處，那就須要手工找到全部的進行更新。好比：$('.userEl1, .userEl2').html('Jikey')等等的方式。

3.3 URL變化視圖更新，頁面不刷新，更少的從數據從後端請求。

3.3.1 傳統方式

好比公網上有個url：http://www.jing-ui.com，輸入地址欄以後：

1. 先從緩存中查詢相關304狀態的資源
2. 而後從全球根DNS庫中查詢域名對應的服務器IP，
3. 根據IP找到服務器發起創建TCP連接三次握手，
4. 而後瀏覽器向服務器發起HTTP請求，
5. 服務端看到有請求過來，解析URL路徑
6. 根據服務端的路由，返回所有HTML結構，圖片，CSS，JS文件。
7. 瀏覽器根據返回的內容依次構建：DOM樹，CSSOM樹, 將DOM,CSSOM合併生成渲染樹，計算渲染樹佈局，而後將佈局渲染到屏幕上。

3.3.2 Vue方式

只有首次發起全頁面請求，後續請求服務端返回業務相關JSON數據，由瀏覽器Vue模板來組裝HTML結構，而後渲染到屏幕上。由此能夠看到，只要瀏覽器不帥鍋，性能更好，渲染體驗更好。同時也從新闡明瞭Vue的立場，就是前端框架，與Spring, Struts, Thinkphp這些服務端框架不同，也不具有處理POST請求的能力，只能從拼接的url參數上取值，微信受權就是這種方式獲取OpenId。

內部技術處理上主要是2種方式：

1. hash 模式
   經過爲hash增長監聽事件來達到：更新視圖不從新請求頁面但能夠ajax請求數據的目的。

window.addEventListener("hashchange", handleHash, false)

1. history 模式
   HTML5提供了兩個新的方法：pushState(), replaceState()使咱們能夠對瀏覽器歷史記錄棧進行操做：

window.addEventListener('popstate', matchAndUpdate)
window.history.pushState(stateObject, title, url)
window.history.replaceState(stateObject, title, url)。

3.4 統一數據源管理

Vue是基於組件構建前端頁面，多個組件上的數據必須保持同步和一致性，好比管理界面，左側菜單的打開狀態，必須在切換好的頁面中保持當前目錄的展開。用戶頭像必須在每一個頁面都顯示同一的頭像。等等。這時候就須要一個全局變量經過代碼編程的方式方便的管理數據，爲了與業界保持一致，採用了必定的API代表上看起來更繁瑣，隨着項目的增大，API更加的利於數據的管理。

4. Vue核心

全家桶構建的快速開發體系，Vue-cli初始化項目基礎配置和文件結構，Vuex進行全局的數據狀態管理，Vue-Router進行路由的跳轉與處理。

5. Vue優勢

5.1 文檔清晰完善

• vue-cli
• vuejs
• vuex
• vue-router
• Vue.js 服務器端渲染指南
• nuxtjs

5.2 入門曲線更爲平緩

代表上.vue像是一個新的格式，其實內部已經從開發約定層面規定了開發的入口，不管從teamplate裏邊的html，仍是script裏邊的js，仍是style裏邊的css，都是以一種之前熟悉的內容進行開發。

5.3 應用方式更爲靈活

即能直接以script的方式引入，也能以.vue的方式進行開發。

5.4 周邊生態日趨完善

從vue主框架到vue-router,nuxt,基本知足了平常的開發。

6. Vue難點

前期主要是前端基礎的難點，中後期就是項目架構性能的優化和擴展維護。

6.1 JS基礎

包括變量類型，流程控制，事件，DOM, BOM

6.2 Ajax基礎

入手的關鍵字

• 同步異步請求
• HTTP1.0，HTTP2.0區別
• 各個HTTP狀態碼的調試，瞭解常見的200,301,400,401,404,500含義
• Chrome 調試工具 Network面板：主要查看狀態碼，request, response，從而驗證發出請求與後端返回的字段的正確性。
• Postman工具：模擬瀏覽器發起請求，從而脫離瀏覽器來驗證接口是否正確

6.3 ES6基礎

call:es6
主要是增長變量申明，箭頭函數，Promise，Async, Await的支持，加強String,Number,Function,Array,Object等的擴展還有增長模塊管理Exports,Import功能。

7. Vue與非Vue項目結合

先引入Vue主文件，組件文件，而後尋找一個適當的容器裝載Vue渲染後的結果。

7.1 尋找容器

id爲app的容器元素。

7.2 JS文件的引入

引入打包以後的dist文件。

7.3 404狀態的處理

HTML5 History 模式

8. Vue調試

結合Vue.js devtools, Chrome Debugger調試。

• Vue.js devtools 經過Components, Vuex, Events, Routing, Performance, Settings幾個tab着重對Vue組件整個生命週期內API數據的追蹤，好比能夠在面板上看到data, computed
• Chrome Debugger 着重對代碼流程數據的逐步追蹤

9. Vue與SEO

SSR渲染框架支持工具Nuxt

• Vue.js 服務器端渲染指南
• Nuxtjs