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

方生

摘要：隨著軟件產業的快速發展，軟件開發已經從如何開發轉變為如何更高效、低成本的開發。傳統的軟件開發技術雖然相對成熟，但由于受其開發效率和成本的制約，越來越不能滿足軟件產品的開發需求。為了提高軟件產品的開發效率，降低開發成本，大量的框架技術和工具迅速普及。而“Vue.js”前端框架技術從眾多框架中脫穎而出，成為構建用戶界面的前端框架技術之一。該文基于“Vue.js”前端框架技術研究，闡述了“Vue.js”數據驅動和組件化核心思想，并就基于“Vue.js”的單頁“Web”應用和項目開發工程化相關技術進行了分析。

關鍵詞：Vue.js;前端框架;數據驅動;組件化

中圖分類號：TP311? ? ? 文獻標識碼：A

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

1 背景

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

2 “Vue.js”簡介

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

2.1 數據綁定

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

2.2 組件化

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

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

3 “Vue.js”常用插件

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

3.1 “Vue router”路由管理

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

3.2 “axios”數據請求

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

1） 從瀏覽器中創建“XMLHttpRequest”;

2） 從“node.js”發出“HTTP”請求;