基于“Vue.js”前端框架技術(shù)的研究

方生

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

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

中圖分類號：TP311? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2021）19-0059-02

1 背景

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

2 “Vue.js”簡介

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

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

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

2.2 組件化

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

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

3 “Vue.js”常用插件

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

3.1 “Vue router”路由管理

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

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

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

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

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