基于VueJs的WEB前端開發研究

徐頔 朱廣華 賈瑤

DOI：10.19392/j.cnki.16717341.201714060

摘要：Vue.js是時下非常流行的一種WEB前端開發技術，這種技術是基于MVVM架構[1]的模式，而這種MVVM架構模式是一種新型的模式，它只要是在經典的MVC模式[2]上衍生出來的。筆者先是對關于Vue.js的MVVM架構模式進行了簡單的介紹，然后對Vue.js的運行原理進行了一系列的闡述，最后通過與一個典型基于MVVM架構模式的React.js框架進行對比，通過對比總結Vue.js的優勢所在。

關鍵詞：MVVM；Vue.js；Web

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

1 在Vue.js中的MVVM模式

傳統的MVC模式是軟件工程中一種經典的設計模式，它是對一個項目工程進行邏輯層次的劃分，將項目數據，功能視圖與邏輯操作進行分層設計。其中MVC分別是Model，View和Controller首字母的縮寫，在項目中，View是軟件的視圖界面，Model是為視圖界面所需的數據，控制器Controller是View和Model的協調者，View和Model不直接聯系，基本聯系都是單向的。但是隨著互聯網飛速發展，在此基礎上衍生出了MVVM開發模式。

MVVM模式的全稱為Model View ViewModel。它的側重點在于用事件驅動的UI平臺的開發。即View的變化會自動更新到ViewModel，而ViewModel的變化也會自動同步到View上顯示。MVVM的本質是通過數據綁定鏈接View和Model，讓數據的變化自動映射為視圖的更新。

對于需要動態更新的DOM節點來說，Vue.js會為其創建一個指令對象。而對于指令對象來說，如果其數據發生變化的時候，便會對操作與之匹配的節點，進行相應的Dom操作。Vue為每個Dom操作都進行了封裝，使它們成為Vue特定指令，這樣關于業務代碼量在無形之中得到了很好的改善，對于系統的開發投入和日后的維護投入都得到了大大降低。

2 Vue.js的運行原理

在介紹Vue.js運行原理之前，先要介紹幾個概念。Observer本質是一個數據監聽器，不言而喻它是起到一個監聽的作用，對于數據對象中的所有屬性，它都能夠對其監聽，告知訂閱者哪些屬性發生了變化和發生了哪些變化。對于指令解析器Compile，它是對Vue.js中的指令進行掃描，并對掃描后的指令進行解析編譯。Watcher相當于一個協調者，它主要的作用是在Observer和Compile之間建立起連接，它不但能夠接收來自Observer的屬性變化通知，而且從中起到一個調度的作用，并執行指令綁定的相應的回調函數，從而更新視圖。

在Vue創建一個對象時，首先會為這個對象進行一個初始化的過程。在初始化的過程中，Observer會一直對這個對象所有的屬性進行監聽，同時Compile會掃描Web頁面中的指令，對掃描后的指令進行編譯，并會初始化視圖。而Watcher會在Dep中添加一個訂閱者。

當系統一旦運行起來，Observer監聽器就會獲取屬性變化并通知Dep，在Dep中會查找與該屬性對象對應的訂閱者，并向添加該訂閱者的Watcher發送變化通知，從而對視圖進行相應的更新。

3 Vue.js與React.js的對比

React.js最早的時候是Facebook公司的自己做的一個項目， 當時的前端框架都是基于傳統的MVC模式，但是傳統的MVC卻很難滿足Facebook公司當時的要求。因為當時項目是一個很龐大的項目，包含非常復雜的邏輯結構和相當多的程序代碼，所以便誕生了React.js。

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

1）使用 Virtual DOM。

2）提供了響應式（Reactive）和組件化（Composable）的視圖組件。

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

本文側重比較Vue.js與React.js不同之處，并通過比較體現Vue.js的優勢所在，所以這里不再對相似之處進行贅述。

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

為了客觀的得到實驗結果，筆者對實驗項目進行了二十次的運行，并獲取各自運行中產生的最好結果。通過運行結果可以明顯的看出未經優化的 Vue 相比未經優化的 React 要快的多。由于 Vue 改進過渲染性能，甚至全面優化過的 React 通常也會慢于開箱即用的 Vue。

渲染性能只有Vue的強大性能之一，相比其他前端庫Vue還具很多特點，首先Vue.js是一個輕量級的前端庫，上手簡單，對于新手來說不需要太多的時間就可以學會。對于DOM的更新，Vue使用了異步批量處理方式，所以會非常快速，同時它還可以將每個組件進行一系列組合，這樣對于程序的解耦性和重用性都得到了大大提高。

4 結語

隨著前端的快速發展，無論是用戶界面還是業務處理邏輯都變得越來越復雜使用原生Java Script或jQuery去操控DOM 變得越來越不現實。框架的學習固然有一定的成本，但是當 Web應用的功能和復雜度達到一定的程度時，使用優秀的MVVM框架，例如Vue.js反而在總體上會更節約成本。

參考文獻：

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

[2]許鑫，費翔林.基于MVC 模式的應用軟件開發框架研究[J].計算機工程與應用，2005，41（30）：102104.