vue.js前端應用技術(shù)分析

◆李曉薇

vue.js前端應用技術(shù)分析

◆李曉薇

（晉中職業(yè)技術(shù)學院 山西 030600）

本文對vue.js前端應用技術(shù)進行了分析，首先分析了vue.js框架的基本特點，然后分析了Vue.js框架的常用插件。最后介紹了此框架在單頁Web中的應用。

網(wǎng)頁；vue.js；開發(fā)

1 引言

近年來，隨著網(wǎng)頁開發(fā)技術(shù)的不斷發(fā)展，人們對于網(wǎng)頁開發(fā)的效率和周期要求不斷提升，是否能夠快速交付產(chǎn)品已經(jīng)成為決定企業(yè)競爭力的核心要素[1]。因此，國內(nèi)外眾多互聯(lián)網(wǎng)公司便紛紛開展面向組件形式的開發(fā)模式，其中前端開發(fā)方面主要出現(xiàn)了三類比較常用的開發(fā)框架，分別為google的AngularJS框架、facebook的ReactJS框架，以及國產(chǎn)的Vue.js框架。其中，Vue.js框架集成了前兩個框架的優(yōu)勢特點，并且是純國產(chǎn)化框架，開發(fā)文檔也相對比較清晰易讀，是國內(nèi)比較流行的開發(fā)框架之一[2]。鑒于此，本文將對vue.js前端應用技術(shù)進行分析。

2 vue.js介紹

從網(wǎng)頁系統(tǒng)的開發(fā)邏輯上來看，Vue.js框架是一種面向前端界面開發(fā)的輕量化框架，其設計模式遵循自下而上的原則，此種開發(fā)框架的最本質(zhì)的特點是具有響應式編程和組態(tài)化的特點[3]。

2.1 響應式編程特點

此種特點最主要的特征是支持前臺顯示的數(shù)據(jù)狀態(tài)和其視圖是實時同步的，在傳統(tǒng)的網(wǎng)頁開發(fā)過程中，一般的數(shù)據(jù)交互為了節(jié)省網(wǎng)頁的刷新速度，往往采用異步數(shù)據(jù)交互方式，此種開發(fā)方式往往是將數(shù)據(jù)進行展示后，若要對數(shù)據(jù)再次進行修改需要借助DOM獲取的方式，這樣才可保證數(shù)據(jù)的同步性[4]。Vue.js框架采用MVVM的設計模式，此模式改變了傳統(tǒng)的DOM操作模式，對于視圖的維護和數(shù)據(jù)的管理不再需要花費許多時間，只需要對數(shù)據(jù)的變化進行持續(xù)監(jiān)控即可。Vue.js框架的核心是能夠快速響應數(shù)據(jù)，這便使得代碼的開發(fā)變得更加簡潔和高效，更方便其他開發(fā)人員對代碼進行理解。Vue.js框架的MVVM開發(fā)模式架構(gòu)圖如圖1所示。

圖1 MVVM開發(fā)模式架構(gòu)圖

2.2 組態(tài)化特點

如何提升開發(fā)的效率？這是多年來開發(fā)人員一直在持續(xù)研究的問題。從本質(zhì)上講，代碼最大限度地復用，能夠降低程序員的額外工作。所有程序員都希望引用之前開發(fā)的代碼，但是問題在于會對現(xiàn)有程序造成影響?；诖朔N理念，兩種插件被開發(fā)出來，一種是JQuery插件，另一種是requireJS，，使用回調(diào)函數(shù)來解決模塊按需加載的問題。以上兩種方法，解決了程序員的部分代碼重用問題，但是在開發(fā)過程中仍然需要對所需要的CSS和HTML相關(guān)文件進行引入。鑒于此，近年來“Web”組件的出現(xiàn)提供了一種新的思維方式，通過組件的開發(fā)，可以對可重用代碼進行封裝，并將封裝后的代碼注冊為標簽，擴展“HTML”元素的功能。因此，在網(wǎng)頁前端開發(fā)中出現(xiàn)了Vue.js框架，其核心思想便是基于組件的開發(fā)模式。在此種開發(fā)框架的支持下，采用組件化的特點，任何級別的封裝代碼都可以被注冊為開發(fā)標簽，這樣便大大降低了程序員開發(fā)過程中的重復開發(fā)工作，提升了代碼的重用程度以及開發(fā)效率。

3 Vue.js框架的常用插件分析

Vue.js框架僅僅是實現(xiàn)了數(shù)據(jù)的持久化和實時化綁定的問題，如果想實現(xiàn)基于此框架的網(wǎng)頁應用程序開發(fā)還是需要眾多插件支持的。比較常用的插件例如“Vue-router”“axios”和“Vuex”等，以上三個插件在開發(fā)過程中分別負責路由、數(shù)據(jù)請求和狀態(tài)的基本管理。

3.1 Vue-router插件

此插件是為Vue.js框架提供路由管理的插件，借助hash和History interface兩種方式實現(xiàn)前端路由。在傳統(tǒng)的開發(fā)模式中，頁面的跳轉(zhuǎn)是前端頁面經(jīng)過中央控制器，借助超鏈接向服務器發(fā)送請求，然后根據(jù)收到的數(shù)據(jù)模板，將其渲染為HTML，最后在瀏覽器端解析。采用Vue-router插件之后，可以將以上邏輯放置前端進行，然后從后端進行數(shù)據(jù)抽取和模板填充，在瀏覽器中完成HTML的渲染，最終實現(xiàn)前后端的分離。此種插件，只需要對后端提供數(shù)據(jù)接口。其基本的邏輯是將路徑映射到具體的組件之中，并且通過修改路由在組件之間進行隨機切換。

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

在實際開發(fā)過程中，根據(jù)上文所述都是采用異步方式進行數(shù)據(jù)交互，一般情況下，使用jQuery的ajax方法來實現(xiàn)對數(shù)據(jù)的異步請求。而axios是基于promise的HTTP客戶端，其主要工作流程如表2所示。

表2 基于axios的數(shù)據(jù)請求基本流程

序號工作流程 1從瀏覽器中創(chuàng)建XMLHttoRequest請求 2從node.js中發(fā)出HTTP請求 3支持Promise API 4攔截請求和響應 5轉(zhuǎn)換請求和響應請求 6取消請求 7自動轉(zhuǎn)換JSON數(shù)據(jù) 8客戶端支持防止CSRF/XSRF

3.3 Vuex狀態(tài)管理組件

采用Vue.js開發(fā)組件進行開發(fā)后，在網(wǎng)頁開發(fā)過程中需要將組件的當前狀態(tài)傳遞給其他組件。一種情況是在父子組件之間開展通信，當父組件將數(shù)據(jù)傳遞給其子組件時，一般會采用Props方式進行數(shù)據(jù)的傳遞。當子組件為其父組件進行數(shù)據(jù)傳遞時，需要采用自定義方式來進行數(shù)據(jù)傳遞。采用此種模式后，父組件能夠像處理原生DOM。

4 單頁Web的應用

在以往傳統(tǒng)的代碼編寫過程中，時常是使用HTML、JavaScript和CSS三類文件格式，然后將其放置在一起，實現(xiàn)其集成。這種操作對于后期的代碼維護并不是很方便。自從有了webpack和loader之后，便可以將上述三類文件固定在一個文件夾中。webpack和loader會將單個文件中的三部分代碼分別編譯成為可以被執(zhí)行的文件。在項目目錄中，單個.vue文件便是一個組件，不同的組件共同構(gòu)成一個項目應用程序。

4.1 webpack

Webpack是對于網(wǎng)頁開發(fā)前端資源的集成工具，此種模式可以將各類資源作為單個模塊而存在，然后按照固定的順序?qū)δ承┠K進行打包，從而形成相應的靜態(tài)資源。當webpack在進行應用程序處理時，需要構(gòu)成一個含有應用程序的不同模塊的相互依賴關(guān)系結(jié)構(gòu)圖，隨后將眾多模塊打包為一個模塊。此文件能夠使用終端或者對相應的配置文件進行更改來設定不同的功能。

4.2 loader

“Loader”是基于“webpack”的加載程序?！癢ebpack”本身只能處理“JavaScript”模塊，如果要處理其他類型的模塊，則需要使用“l(fā)oader”進行轉(zhuǎn)換。如果想要在應用中添加“CSS”文件，就需要使用“css-loader”和“style-loader”加載器?！癱ss-loader”加載器用于加載“CSS”文件，而“style-loader”加載器會將原來的“CSS”代碼插入頁面中的一個“style”標簽中。

5 結(jié)論

Vue.js是目前國內(nèi)應用最為普遍的前端開發(fā)框架，采用此種開發(fā)模式可以大幅度地提升開發(fā)效率以及代碼的服用效率，如何更好地將開發(fā)技術(shù)應用于軟件項目開發(fā)過程中，縮短軟件的開發(fā)周期，保障系統(tǒng)維護的可靠性以及可擴展性，是開發(fā)此框架的最主要目標。

[1]唐斌斌，葉奕. Vuejs在前端開發(fā)應用中的性能影響研究[J]. 電子制作，2020，396（10）：51-52+61.

[2]肖小嵐，劉振宇. 基于MVVM模式的Extjs框架在前端界面設計中的應用研究[J]. 電腦知識與技術(shù)，2016，12（5）：84-88.

[3]曠志光，紀婷婷，吳小麗. 基于Vue.js的后臺單頁應用管理系統(tǒng)的研究與實現(xiàn)[J]. 現(xiàn)代計算機，2017（030）：51-55.

[4]張志鵬，黃素娟，蔣龍玉，等. 基于Vue.js的車險報價系統(tǒng)的設計與實現(xiàn)[J]. 微型電腦應用，2020，036（004）：70-74.