Vue 簡介

概述

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，發(fā)布于 2014 年 2 月。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫（如：vue-router，vue-resource，vuex）或既有項目整合。

官方網(wǎng)站

MVVM 模式的實現(xiàn)者

我們知道 MVVM 表示如下：

• Model：模型層，在這里表示 JavaScript 對象
• View：視圖層，在這里表示 DOM（HTML 操作的元素）
• ViewModel：連接視圖和數(shù)據(jù)的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實現(xiàn)者

Lusifer201812170001.png

在 MVVM 架構(gòu)中，是不允許 數(shù)據(jù) 和 視圖 直接通信的，只能通過 ViewModel 來通信，而 ViewModel 就是定義了一個 Observer 觀察者

• ViewModel 能夠觀察到數(shù)據(jù)的變化，并對視圖對應(yīng)的內(nèi)容進(jìn)行更新
• ViewModel 能夠監(jiān)聽到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生改變

至此，我們就明白了，Vue.js 就是一個 MVVM 的實現(xiàn)者，他的核心就是實現(xiàn)了 DOM 監(jiān)聽 與 數(shù)據(jù)綁定

其它 MVVM 實現(xiàn)者

• AngularJS
• ReactJS
• 微信小程序

為什么要使用 Vue.js

• 輕量級，體積小是一個重要指標(biāo)。Vue.js 壓縮后有只有 20多kb （Angular 壓縮后 56kb+，React 壓縮后 44kb+）
• 移動優(yōu)先。更適合移動端，比如移動端的 Touch 事件
• 易上手，學(xué)習(xí)曲線平穩(wěn)，文檔齊全
• 吸取了 Angular（模塊化）和 React（虛擬 DOM）的長處，并擁有自己獨(dú)特的功能，如：計算屬性
• 開源，社區(qū)活躍度高

Vue.js 的兩大核心要素

數(shù)據(jù)驅(qū)動

Lusifer201812170001.png

Lusifer201812170002.png

當(dāng)你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器。

這些 getter/setter 對用戶來說是不可見的，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數(shù)據(jù)對象時 getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。

每個組件實例都有相應(yīng)的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項的 setter 被調(diào)用時，會通知 watcher 重新計算，從而致使它關(guān)聯(lián)的組件得以更新。

組件化

• 頁面上每個獨(dú)立的可交互的區(qū)域視為一個組件
• 每個組件對應(yīng)一個工程目錄，組件所需的各種資源在這個目錄下就近維護(hù)
• 頁面不過是組件的容器，組件可以嵌套自由組合（復(fù)用）形成完整的頁面