2.1 Vue.js基礎(chǔ)

本節(jié)介紹Vue.js的基礎(chǔ)知識(shí)、發(fā)展歷史、組織架構(gòu)以及具體應(yīng)用等方面的內(nèi)容。

2.1.1　Vue.js簡(jiǎn)介

Vue.js是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，采用了“自底向上、增量開(kāi)發(fā)”的設(shè)計(jì)方式。Vue.js的核心是只關(guān)注視圖層，便于與第三方庫(kù)或既有項(xiàng)目進(jìn)行整合。細(xì)心的讀者會(huì)發(fā)現(xiàn)，這幾句話里面提到了幾個(gè)關(guān)鍵詞匯，如“漸進(jìn)式”“自底向上、增量開(kāi)發(fā)”“視圖層”，下面就這幾個(gè)概念展開(kāi)講解一下。

首先，這個(gè)“漸進(jìn)式”的概念就比較新穎，那么它具體是什么含義呢？所謂“漸進(jìn)式”就是一開(kāi)始不需要設(shè)計(jì)人員完全掌握框架的全部功能特性，可以放到后續(xù)步驟中逐步完成，這樣就實(shí)現(xiàn)了每一步都可以更專注于當(dāng)前的任務(wù)。從本質(zhì)上講，這就是設(shè)計(jì)模式上的優(yōu)化與進(jìn)步。而與Vue.js框架相對(duì)應(yīng)的Angular框架和React框架，均不是嚴(yán)格意義上的漸進(jìn)式框架，均具有一定程度上的個(gè)性化及排他性。

其次，“自底向上、增量開(kāi)發(fā)”這個(gè)概念主要描述的是設(shè)計(jì)方式。這種設(shè)計(jì)方式的思路就是，先設(shè)計(jì)好基礎(chǔ)骨架，然后逐步向上擴(kuò)充，完善功能和效果。采用“自底向上、增量開(kāi)發(fā)”的設(shè)計(jì)方式，可以有效地提高開(kāi)發(fā)效率，避免不必要的重復(fù)工作。

最后，這個(gè)“視圖層”的概念指的就是著名的MVVM架構(gòu)模型中的View層。Vue.js是一個(gè)基于MVVM（Model-View-ViewModel）架構(gòu)模型實(shí)現(xiàn)了“雙向數(shù)據(jù)綁定”功能的前端JavaScript庫(kù)，其關(guān)注的核心點(diǎn)就是View層。另外，這里提到的關(guān)于MVVM架構(gòu)模型和“雙向數(shù)據(jù)綁定”的內(nèi)容，會(huì)在2.1.3節(jié)和2.1.4節(jié)中詳細(xì)介紹。

2.1.2　Vue.js發(fā)展歷史

Vue.js最早發(fā)布于2014年左右，開(kāi)發(fā)者是曾在Google工作的中國(guó)籍開(kāi)發(fā)人員—尤雨溪。根據(jù)作者本人的描述，Vue.js框架的定位就是為前端開(kāi)發(fā)者提供一個(gè)低門(mén)檻、高效率，又同時(shí)能夠伴隨用戶成長(zhǎng)的前端框架。

Vue.js框架的發(fā)展歷程主要如下：

（1）實(shí)驗(yàn)（experiment）階段（2013年中~2014年2月）。

（2）0.x版本階段（2014年2月~2015年10月）。

（3）1.x版本階段（2015年10月~2016年9月），發(fā)行版名稱為“Evangelion”。

（4）2.x版本階段（2016年9月~2019年10月），發(fā)行版名稱為“Ghost in the Shell”。

（5）3.x版本階段（2019年10月~至今），引入了全新的響應(yīng)式框架，提供了更好的TypeScript語(yǔ)言支持。

關(guān)于Vue.js框架以上幾個(gè)版本更新發(fā)展的過(guò)程，大致介紹如下：

在早期0.x版本階段，內(nèi)容更新主要集中在Vue模版語(yǔ)法上。而在1.x版本階段期間，模版語(yǔ)法就日趨穩(wěn)定了。在2.x版本階段，內(nèi)容更新專注于內(nèi)部的渲染機(jī)制功能，這期間引入了著名的Virtual DOM機(jī)制，從而實(shí)現(xiàn)了服務(wù)端渲染、原生渲染、手寫(xiě)渲染函數(shù)等強(qiáng)大的設(shè)計(jì)功能。目前，3.x版本已完成并處于快速的迭代開(kāi)發(fā)過(guò)程中，更新目標(biāo)主要集中于利用ES 6（ECMAScript 2015）版本的新特性、改進(jìn)內(nèi)部架構(gòu)，以及性能優(yōu)化等方面。截止筆者完成本書(shū)的寫(xiě)作，Vue.js框架最新版本為v3.4，Vue官網(wǎng)已經(jīng)建議開(kāi)發(fā)者遷移到Vue 3版本中，本書(shū)中的Vue代碼應(yīng)用就是基于最新的v3.4版本。

2.1.3　Vue.js與MVVM架構(gòu)模型

軟件設(shè)計(jì)的架構(gòu)模型往往決定著一個(gè)開(kāi)發(fā)框架的特性與性能，就好比基因?qū)τ谌祟惥哂袥Q定性因素一樣。架構(gòu)模型從MVC到MVP，再到MVVM，每一步都體現(xiàn)了開(kāi)發(fā)人員對(duì)于設(shè)計(jì)模式的不斷完善。

MVVM架構(gòu)本質(zhì)上就是MVC架構(gòu)的改進(jìn)版。MVC架構(gòu)可謂大名鼎鼎，相信大多數(shù)讀者在剛開(kāi)始接觸架構(gòu)模型時(shí)學(xué)習(xí)的就是該架構(gòu)。從MVVM架構(gòu)模型的命名來(lái)看，Model-View-ViewModel中的Model（模型）和View（視圖）沿用了下來(lái)，改變的就是Controller（控制器）被ViewModel替換了。那么，ViewModel代表什么概念？Vue.js借鑒了MVVM的什么設(shè)計(jì)理念呢？

ViewModel在MVVM中負(fù)責(zé)在Model（模型）和View（視圖）中間的橋接工作，當(dāng)Model（模型）改變時(shí)，通過(guò)ViewModel通知View（視圖），反之亦然。Vue.js框架專注于View（視圖層），將視圖的狀態(tài)和行為抽象化，并于業(yè)務(wù)邏輯分開(kāi)來(lái)設(shè)計(jì)。Vue.js雖然沒(méi)有完全照搬MVVM模型，但對(duì)于ViewModel的設(shè)計(jì)有獨(dú)到之處。當(dāng)View（視圖）改變時(shí)會(huì)觸發(fā)事件，通過(guò)ViewModel負(fù)責(zé)監(jiān)聽(tīng)事件并同步更新Model（模型）。

2.1.4　雙向數(shù)據(jù)綁定

Vue.js框架實(shí)現(xiàn)的一項(xiàng)核心功能就是“雙向數(shù)據(jù)綁定”，所謂雙向數(shù)據(jù)綁定就是指View（視圖）和Model（模型）的數(shù)據(jù)相互同步。

Vue.js框架是基于MVVM架構(gòu)設(shè)計(jì)的。為了實(shí)現(xiàn)View（視圖）和Model（模型）的數(shù)據(jù)相互同步，Vue.js會(huì)通過(guò)DOM Listeners來(lái)監(jiān)聽(tīng)并改變Model（模型）中的數(shù)據(jù)；當(dāng)Model（模型）中的數(shù)據(jù)發(fā)生改變時(shí)，會(huì)通過(guò)Data Bingings來(lái)監(jiān)聽(tīng)，并改變View（視圖）中數(shù)據(jù)的展示。這一點(diǎn)也正是MVVM架構(gòu)對(duì)“雙向數(shù)據(jù)綁定”的支持。

在Vue.js框架底層，通過(guò)使用JavaScript Object對(duì)象的defineProperty()方法，重新定義對(duì)象獲取屬性值和設(shè)置屬性值的方法，從而實(shí)現(xiàn)“雙向數(shù)據(jù)綁定”操作。因此，其原理仍舊是通過(guò)JavaScript方式實(shí)現(xiàn)的。

2.1.5　Vue.js特點(diǎn)

Vue.js是一款基于數(shù)據(jù)驅(qū)動(dòng)思想開(kāi)發(fā)的JavaScript框架，下面總結(jié)一下Vue.js框架的幾個(gè)主要特點(diǎn)。

·　Vue.js是基于MVVM架構(gòu)設(shè)計(jì)的、一套用于構(gòu)建用戶瀏覽器界面的、漸進(jìn)式的前端Web框架。

·　Vue.js是基于數(shù)據(jù)驅(qū)動(dòng)思想開(kāi)發(fā)的JavaScript框架，實(shí)現(xiàn)了在盡可能的條件下最大程度地減少繁雜的DOM操作。

·　Vue.js開(kāi)發(fā)了一套自己的模板語(yǔ)言，采用虛擬DOM的方式渲染HTML頁(yè)面，實(shí)現(xiàn)了將前后端進(jìn)行分離的開(kāi)發(fā)方式。

·　Vue.js的核心庫(kù)只關(guān)注視圖層，同時(shí)借助MVVM架構(gòu)的特點(diǎn)實(shí)現(xiàn)了“雙向數(shù)據(jù)綁定”的核心功能。

·　Vue.js只聚焦于視圖層，具備能力實(shí)現(xiàn)單文件組件以及相對(duì)復(fù)雜的單頁(yè)面應(yīng)用。

·　Vue.js是一個(gè)輕巧的、高性能的、可組件化的JavaScript框架，設(shè)計(jì)了易于學(xué)習(xí)的API方法，能夠非常方便地與其他前端庫(kù)進(jìn)行有效整合。