方生

摘要：隨著軟件產(chǎn)業(yè)的快速發(fā)展，軟件開(kāi)發(fā)已經(jīng)從如何開(kāi)發(fā)轉(zhuǎn)變?yōu)槿绾胃咝?、低成本的開(kāi)發(fā)。傳統(tǒng)的軟件開(kāi)發(fā)技術(shù)雖然相對(duì)成熟，但由于受其開(kāi)發(fā)效率和成本的制約，越來(lái)越不能滿足軟件產(chǎn)品的開(kāi)發(fā)需求。為了提高軟件產(chǎn)品的開(kāi)發(fā)效率，降低開(kāi)發(fā)成本，大量的框架技術(shù)和工具迅速普及。而“Vue.js”前端框架技術(shù)從眾多框架中脫穎而出，成為構(gòu)建用戶界面的前端框架技術(shù)之一。該文基于“Vue.js”前端框架技術(shù)研究，闡述了“Vue.js”數(shù)據(jù)驅(qū)動(dòng)和組件化核心思想，并就基于“Vue.js”的單頁(yè)“Web”應(yīng)用和項(xiàng)目開(kāi)發(fā)工程化相關(guān)技術(shù)進(jìn)行了分析。

關(guān)鍵詞：Vue.js;前端框架;數(shù)據(jù)驅(qū)動(dòng);組件化

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）19-0059-02

1 背景

近些年來(lái)，互聯(lián)網(wǎng)前端產(chǎn)業(yè)發(fā)展非常迅速。前端開(kāi)發(fā)不僅廣泛應(yīng)用于“PC”端，也廣泛應(yīng)用于移動(dòng)終端的前端工程中。為了改變傳統(tǒng)的前端開(kāi)發(fā)方式，進(jìn)一步提高用戶體驗(yàn)，越來(lái)越多的前端開(kāi)發(fā)人員開(kāi)始使用前端框架技術(shù)來(lái)構(gòu)建前端頁(yè)面。目前流行的前端框架有“Google”的“AngularJS”“Facebook”的“ReactJS”以及本文研究的“Vue.js”。隨著這些框架技術(shù)的出現(xiàn)，基于組件的開(kāi)發(fā)方法得到了普及，也改變了原有的開(kāi)發(fā)思路[1]?！癡ue.js”秉承了“Angular”“React”這兩種框架的優(yōu)勢(shì)，而且是中國(guó)人開(kāi)發(fā)的，對(duì)我們來(lái)說(shuō)，文檔應(yīng)該友好一些，“Vue.js”是目前非常流行的前端框架。

2 “Vue.js”簡(jiǎn)介

“Vue.js”（讀音/vju：/，類似于“view”）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，“Vue.js”采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)?！癡ue.js”是個(gè)非常輕量級(jí)的工具。其本身具有響應(yīng)式編程和組件化的特點(diǎn)[2]。

2.1 數(shù)據(jù)綁定

所謂響應(yīng)式編程，就是保持狀態(tài)和視圖的同步。在傳統(tǒng)的“Web”項(xiàng)目中，將數(shù)據(jù)在視圖中展示出來(lái)后，如果需要再次修改視圖，需要通過(guò)獲取“DOM”的方法進(jìn)行修改，這樣才能維持?jǐn)?shù)據(jù)和視圖一致。而“Vue.js”采用的是“MVVM（Model-View-ViewModel）”的開(kāi)發(fā)模式。這種模式將前端從原始的“DOM”操作中解放出來(lái)，我們不再需要花費(fèi)大量的時(shí)間來(lái)維護(hù)視圖和數(shù)據(jù)的統(tǒng)一，只需要關(guān)注數(shù)據(jù)“Data”的變化?！癡ue.js”的核心是一個(gè)快速響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，在建立綁定之后，“DOM”將和“Vue”對(duì)象中的數(shù)據(jù)“Data”保持同步，這樣，就不需要手動(dòng)獲取“DOM”值，然后將其同步到“JS”中，代碼變得更加簡(jiǎn)潔、易于理解[3]?！癕VVM”開(kāi)發(fā)模式架構(gòu)如圖1所示。

2.2 組件化

在軟件開(kāi)發(fā)中，代碼復(fù)用是每個(gè)程序員所期望的。每個(gè)開(kāi)發(fā)人員都希望再次使用以前編寫(xiě)的代碼，但又擔(dān)心引入此代碼后對(duì)現(xiàn)有程序的影響。之前有兩種解決方式，一種是利用“JQuery”插件的形式復(fù)用代碼。另一種是“requireJS”基于“AMD”模塊加載規(guī)范，使用回調(diào)函數(shù)來(lái)解決模塊按需加載的問(wèn)題。以上兩種方法提供了方便的重用方法，但它們通常需要手動(dòng)添加所需的“CSS”文件和“HTML”模塊?，F(xiàn)在“Web”組件的出現(xiàn)提供了一種新的思維方式，通過(guò)組件的開(kāi)發(fā)，可以對(duì)可重用代碼進(jìn)行封裝，并將封裝后的代碼注冊(cè)為標(biāo)簽，擴(kuò)展“HTML”元素的功能[3]65。

組件系統(tǒng)是“Vue.js”的另一個(gè)核心思想，我們可以使用可重用的組件來(lái)構(gòu)建大規(guī)模應(yīng)用程序。利用組件化的特點(diǎn)，任何封裝的代碼都可以注冊(cè)為標(biāo)簽，大大減少了重復(fù)開(kāi)發(fā)，提高了開(kāi)發(fā)效率和代碼重用性。幾乎任何類型的應(yīng)用程序界面都可以抽象為組件樹(shù)，組件樹(shù)可以由獨(dú)立的可重用組件組成。

3 “Vue.js”常用插件

“Vue.js”只提供了數(shù)據(jù)和視圖綁定以及組件化功能。如果我們想使用它來(lái)開(kāi)發(fā)一個(gè)完整的“SPA”（單頁(yè)應(yīng)用程序）應(yīng)用程序，我們還需要使用一些其他功能“Vue.js”插件?！癡ue.js”比較常用的插件有“Vue-router”“axios”和“Vuex”等。這三個(gè)插件可以分別提供路由管理、數(shù)據(jù)請(qǐng)求和狀態(tài)管理的功能。

3.1 “Vue router”路由管理

“Vue router”是給“Vue.js”提供路由管理的插件，通過(guò)“hash”與“History interface”兩種方式實(shí)現(xiàn)前端路由。過(guò)去，頁(yè)面之間的跳轉(zhuǎn)是由后端“MVC”中的控制器“Controller”層控制，通過(guò)超級(jí)鏈接，我們將向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器響應(yīng)后，根據(jù)接收到的信息獲取數(shù)據(jù)并分配相應(yīng)的模板，將其渲染為“HTML”，然后返回瀏覽器解析為可見(jiàn)頁(yè)面?！癡ue.js + Vue router”的組合將這組邏輯放在前端，切換到相應(yīng)的組件，然后從后端請(qǐng)求數(shù)據(jù)，填充模板，在瀏覽器端完成“HTML”的渲染，這有助于分離前端和后端，前端不依賴后端邏輯，只需要后端提供數(shù)據(jù)接口[3]88。“Vue router”的基本作用是將每條路徑映射到相應(yīng)的組件上，并通過(guò)修改路由在組件之間進(jìn)行切換?！癝PA”的核心就是前端路由[4]。

3.2 “axios”數(shù)據(jù)請(qǐng)求

在實(shí)際開(kāi)發(fā)單頁(yè)面應(yīng)用過(guò)程中，通常和后端都會(huì)使用異步接口進(jìn)行數(shù)據(jù)交互。傳統(tǒng)情況下，我們使用“jQuery”的“$.ajax（）”方法來(lái)做異步請(qǐng)求。從“Vue.js 2.0”版本之后，官方推薦使用“axios”來(lái)實(shí)現(xiàn)“Ajax”請(qǐng)求?！癆xios”是一個(gè)基于“promise”的“HTTP”客戶端，它的主要特點(diǎn)如下：

1） 從瀏覽器中創(chuàng)建“XMLHttpRequest”;

2） 從“node.js”發(fā)出“HTTP”請(qǐng)求;