基于VueJs的WEB前端開發(fā)研究

徐頔 朱廣華 賈瑤

DOI：10.19392/j.cnki.16717341.201714060

摘要：Vue.js是時(shí)下非常流行的一種WEB前端開發(fā)技術(shù)，這種技術(shù)是基于MVVM架構(gòu)[1]的模式，而這種MVVM架構(gòu)模式是一種新型的模式，它只要是在經(jīng)典的MVC模式[2]上衍生出來的。筆者先是對(duì)關(guān)于Vue.js的MVVM架構(gòu)模式進(jìn)行了簡單的介紹，然后對(duì)Vue.js的運(yùn)行原理進(jìn)行了一系列的闡述，最后通過與一個(gè)典型基于MVVM架構(gòu)模式的React.js框架進(jìn)行對(duì)比，通過對(duì)比總結(jié)Vue.js的優(yōu)勢(shì)所在。

關(guān)鍵詞：MVVM；Vue.js；Web

科學(xué)技術(shù)在飛速發(fā)展，隨之也帶動(dòng)了整個(gè)互聯(lián)網(wǎng)產(chǎn)業(yè)，而在整個(gè)互聯(lián)網(wǎng)產(chǎn)業(yè)中發(fā)展勢(shì)頭最猛的要當(dāng)數(shù)移動(dòng)互聯(lián)網(wǎng)產(chǎn)業(yè)了。移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展的同時(shí)卻也為互聯(lián)網(wǎng)技術(shù)帶來了嚴(yán)重考驗(yàn)。那么在整個(gè)Web項(xiàng)目當(dāng)中，前端在整個(gè)項(xiàng)目中的作用是不言而喻的，如何能把前端技術(shù)變的越來越高效也是行業(yè)學(xué)者們茶余飯后的熱門話題。在這種大趨勢(shì)下，Vue.js橫空出世，是時(shí)下最火的前端技術(shù)之一。下面筆者將帶你走入Vue.js的世界。

1 在Vue.js中的MVVM模式

傳統(tǒng)的MVC模式是軟件工程中一種經(jīng)典的設(shè)計(jì)模式，它是對(duì)一個(gè)項(xiàng)目工程進(jìn)行邏輯層次的劃分，將項(xiàng)目數(shù)據(jù)，功能視圖與邏輯操作進(jìn)行分層設(shè)計(jì)。其中MVC分別是Model，View和Controller首字母的縮寫，在項(xiàng)目中，View是軟件的視圖界面，Model是為視圖界面所需的數(shù)據(jù)，控制器Controller是View和Model的協(xié)調(diào)者，View和Model不直接聯(lián)系，基本聯(lián)系都是單向的。但是隨著互聯(lián)網(wǎng)飛速發(fā)展，在此基礎(chǔ)上衍生出了MVVM開發(fā)模式。

MVVM模式的全稱為Model View ViewModel。它的側(cè)重點(diǎn)在于用事件驅(qū)動(dòng)的UI平臺(tái)的開發(fā)。即View的變化會(huì)自動(dòng)更新到ViewModel，而ViewModel的變化也會(huì)自動(dòng)同步到View上顯示。MVVM的本質(zhì)是通過數(shù)據(jù)綁定鏈接View和Model，讓數(shù)據(jù)的變化自動(dòng)映射為視圖的更新。

對(duì)于需要?jiǎng)討B(tài)更新的DOM節(jié)點(diǎn)來說，Vue.js會(huì)為其創(chuàng)建一個(gè)指令對(duì)象。而對(duì)于指令對(duì)象來說，如果其數(shù)據(jù)發(fā)生變化的時(shí)候，便會(huì)對(duì)操作與之匹配的節(jié)點(diǎn)，進(jìn)行相應(yīng)的Dom操作。Vue為每個(gè)Dom操作都進(jìn)行了封裝，使它們成為Vue特定指令，這樣關(guān)于業(yè)務(wù)代碼量在無形之中得到了很好的改善，對(duì)于系統(tǒng)的開發(fā)投入和日后的維護(hù)投入都得到了大大降低。

2 Vue.js的運(yùn)行原理

在介紹Vue.js運(yùn)行原理之前，先要介紹幾個(gè)概念。Observer本質(zhì)是一個(gè)數(shù)據(jù)監(jiān)聽器，不言而喻它是起到一個(gè)監(jiān)聽的作用，對(duì)于數(shù)據(jù)對(duì)象中的所有屬性，它都能夠?qū)ζ浔O(jiān)聽，告知訂閱者哪些屬性發(fā)生了變化和發(fā)生了哪些變化。對(duì)于指令解析器Compile，它是對(duì)Vue.js中的指令進(jìn)行掃描，并對(duì)掃描后的指令進(jìn)行解析編譯。Watcher相當(dāng)于一個(gè)協(xié)調(diào)者，它主要的作用是在Observer和Compile之間建立起連接，它不但能夠接收來自O(shè)bserver的屬性變化通知，而且從中起到一個(gè)調(diào)度的作用，并執(zhí)行指令綁定的相應(yīng)的回調(diào)函數(shù)，從而更新視圖。

在Vue創(chuàng)建一個(gè)對(duì)象時(shí)，首先會(huì)為這個(gè)對(duì)象進(jìn)行一個(gè)初始化的過程。在初始化的過程中，Observer會(huì)一直對(duì)這個(gè)對(duì)象所有的屬性進(jìn)行監(jiān)聽，同時(shí)Compile會(huì)掃描Web頁面中的指令，對(duì)掃描后的指令進(jìn)行編譯，并會(huì)初始化視圖。而Watcher會(huì)在Dep中添加一個(gè)訂閱者。

當(dāng)系統(tǒng)一旦運(yùn)行起來，Observer監(jiān)聽器就會(huì)獲取屬性變化并通知Dep，在Dep中會(huì)查找與該屬性對(duì)象對(duì)應(yīng)的訂閱者，并向添加該訂閱者的Watcher發(fā)送變化通知，從而對(duì)視圖進(jìn)行相應(yīng)的更新。

3 Vue.js與React.js的對(duì)比

React.js最早的時(shí)候是Facebook公司的自己做的一個(gè)項(xiàng)目， 當(dāng)時(shí)的前端框架都是基于傳統(tǒng)的MVC模式，但是傳統(tǒng)的MVC卻很難滿足Facebook公司當(dāng)時(shí)的要求。因?yàn)楫?dāng)時(shí)項(xiàng)目是一個(gè)很龐大的項(xiàng)目，包含非常復(fù)雜的邏輯結(jié)構(gòu)和相當(dāng)多的程序代碼，所以便誕生了React.js。

首先Vue.js與React.js是有很多相似之處：

1）使用 Virtual DOM。

2）提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件。

3）將注意力集中保持在核心庫，伴隨于此，有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫。

本文側(cè)重比較Vue.js與React.js不同之處，并通過比較體現(xiàn)Vue.js的優(yōu)勢(shì)所在，所以這里不再對(duì)相似之處進(jìn)行贅述。

對(duì)于Vue.js與React.js不同之處筆者通過一個(gè)小例子進(jìn)行對(duì)比。當(dāng)我們對(duì)用戶界面進(jìn)行渲染時(shí)候，為了降低Dom的操作React和Vue都是通過Virtual Dom抽象層來實(shí)現(xiàn)這一要求，對(duì)于必要的Dom 操作以外，必須要減少另外功能的消耗，比如一些頁面運(yùn)算等等。這就是 Vue 和 React 存在的不同之處。為了證明這點(diǎn)，我們建立了一個(gè)簡單的參照項(xiàng)目，它負(fù)責(zé)渲染 10000個(gè)列表項(xiàng) 100 次。

為了客觀的得到實(shí)驗(yàn)結(jié)果，筆者對(duì)實(shí)驗(yàn)項(xiàng)目進(jìn)行了二十次的運(yùn)行，并獲取各自運(yùn)行中產(chǎn)生的最好結(jié)果。通過運(yùn)行結(jié)果可以明顯的看出未經(jīng)優(yōu)化的 Vue 相比未經(jīng)優(yōu)化的 React 要快的多。由于 Vue 改進(jìn)過渲染性能，甚至全面優(yōu)化過的 React 通常也會(huì)慢于開箱即用的 Vue。

渲染性能只有Vue的強(qiáng)大性能之一，相比其他前端庫Vue還具很多特點(diǎn)，首先Vue.js是一個(gè)輕量級(jí)的前端庫，上手簡單，對(duì)于新手來說不需要太多的時(shí)間就可以學(xué)會(huì)。對(duì)于DOM的更新，Vue使用了異步批量處理方式，所以會(huì)非?？焖?，同時(shí)它還可以將每個(gè)組件進(jìn)行一系列組合，這樣對(duì)于程序的解耦性和重用性都得到了大大提高。

4 結(jié)語

隨著前端的快速發(fā)展，無論是用戶界面還是業(yè)務(wù)處理邏輯都變得越來越復(fù)雜使用原生Java Script或jQuery去操控DOM 變得越來越不現(xiàn)實(shí)?？蚣艿膶W(xué)習(xí)固然有一定的成本，但是當(dāng) Web應(yīng)用的功能和復(fù)雜度達(dá)到一定的程度時(shí)，使用優(yōu)秀的MVVM框架，例如Vue.js反而在總體上會(huì)更節(jié)約成本。

參考文獻(xiàn)：

[1]劉立.MVVM 模式分析與應(yīng)用[J]. 微型電腦應(yīng)用，2012，28（12）：5760.

[2]許鑫，費(fèi)翔林.基于MVC 模式的應(yīng)用軟件開發(fā)框架研究[J].計(jì)算機(jī)工程與應(yīng)用，2005，41（30）：102104.