輕量級響應式框架Vue.js應用分析

陳巖

[摘 要] 傳統的dom處理系統需要進行繁雜的選擇器進行內容的編寫工作，通過逐級操作來還原服務器中需要的JSON格式數據資源，這樣的操作方式不僅操作起來繁瑣同時也極易容易在數據的輸入過程中出現致命的錯誤。隨著科學技術的不斷革新，針對傳統dom出現的問題，現在可以通過Vue.js的輕量級響應式雙向綁定數據信息，對數據的真實變化情況進行實時的監控并映射到數據源上，能夠有效的避免前端頁面在開發過程中的dom選擇器操作復雜程序，簡化了WEB在前端開發設計過程中的難度，提升了開發的效率，降低開發的成本投入，縮短了開發時間，提升了微信公眾號使用的效果。

[關鍵詞] Vue.js；輕量級；響應式框架；JavaScript；應用研究

doi ： 10 . 3969 / j . issn . 1673 - 0194 . 2018. 03. 075

[中圖分類號] TP311 [文獻標識碼] A [文章編號] 1673 - 0194（2018）03- 0181- 03

0 前 言

科學技術在快速的發展，推動了整個互聯網產業化發展進程，在互聯網的產業發展中發展態勢最好的還是移動互聯網產業。移動互聯網產業在高速發展地過程中問題也就隨之出現了，技術的革新應用如何才能夠滿足于移動互聯網的產業發展所需？在整個WEB項目發展中，前端是整個項目中最重要的組成部分，如何提升前端的技術發展也當下需要重點研究項目。

1 Vue.js軟件介紹

Vue.js軟件的問世就是為了更好地提高微信公眾平臺的開發效率，它是在對WEB前端基礎框架的開發中進行的深度研究。Vue.js軟件與目前市場比較流行的PLOYMER、REACT和ANGULAR相比較，使用量、選擇率最高的還是Vue.js框架。Vue.js與其他的軟件的框架不同的是，它具有一套完備的用戶界面構建模式且是呈現出漸進式的框架結構，Vue.js軟件采取的是自下而上的逐漸增減的變量開發設計形式，Vue.js在操作過程中更加的靈活自由，框架結構設計簡單、能夠方便于使用者快速的熟悉并掌握其全部的使用特征，并將其投入到使用中，同時還能夠與第三方數據庫已有的項目進行融合，Vue.js響應式框架結構原理如圖1所示。

2 Vue.js輕量級響應式框架的應用分析

2.1 WEBPACK的應用研究

WEBPACK是軟件前端開發的打包工具，在應用過程中每一次的打包都會進行逐級的項目結構分析，將數據定位在每一個js模塊以及其相關的CSS之中，并將二者合并在一起進行打包處理。在使用WEBPACK項目模塊進行操作時，由于會接觸到不同的加載器，這樣就會讓繁雜的開發程序分解成一個個獨立的小模塊，將復發化的WEB前端開發轉化成了分層次、分級別的小模塊化的軟件開發；對于項目的合并之后的文件壓縮，能夠大大提升文件的傳輸速度和軟件的運行速度，通過不同的PLUGIN插件還能夠對程序進行加密處理，保證程序文件的安全性。

2.2 Vue.js軟件的安裝及使用研究

在發開構建大型的應用軟件時，通常都會選用NPM，因為NPM能夠更好的配合，如：WEBPACK這類的打包軟件配合使用，能夠提升運行的效果；Vue.js軟件能夠為用戶提供官方授權的使用工具，能夠便于使用者在最短的時間內構建大型的單頁應用程序；官方授權的工具中能夠提供即開即用的構建工具配置。它具備現代化的WEB網頁前端開發設計使用流程，在安裝過程中只需要5分鐘就能夠創建出一個能夠重新載入、能夠保存靜態檢查以及符合于使用者使用環境的配置建構。

Vue.js軟件是重點針對前端WEB系統開發的，它與以往的JQUERY是完全不一樣的，JQUERY的運行原理是通過對DOM數據資源的查詢，生成制定的系統所需數據元素，并賦予數據元素特定的數值；在Vue.js軟件操作中，是很少能夠接觸到DOM的操作，Vue.js軟件的運行是通過響應式框架的雙向進行綁定，賦予元素特定的數值，當頁面發生變化時，其數值也會自動發生變化。

2.3 Vue.js軟件的運行原理分析

熟悉了解Vue.js軟件的運行原理的基礎保障就必須要先熟知幾個必須知道的概念。OBSERVER是數據的監控器，它的主要作用就是對數據進行監控，對于軟件運行中的數據變化它能夠準確的進行分析判斷，排查數據的屬性，然后將監控結果反饋給用戶，告知用戶哪些數據發生了變化、哪些數據沒有發生變化。對于Vue.js軟件中的數據指令解析器，即COMPILE，它是針對Vue.js軟件中的操作指令進行掃描監控，在掃描之后對數據指令進行解碼分析，生成報告。服務器的運行終端就是一個“協調者”的作用，它能夠在數據監控器和數據指令解碼器之間建立起連接的橋梁，起到調度的作用，并通過數據綁定的指令進行函數的分析，將視圖在第一時間內進行更新顯示。

目前，廣西省的3D打印服務中心平臺在全站使用Vue.js軟件進行系統功能的開發及使用，在使用的過程中能夠在短期內對兼容性的數據框架進行平衡處理。廣西省3D打印服務中心的云服務平臺使用圖如圖2所示。

在Vue.js軟件運行中進行對象的創建，首先要對創建的對象進行初始化的運行。在這個初始化的運行過程中，OBSERVER會對這個創建對象的所有數據資源屬性進行全程的監控。在監控的過程中COMPILE會對WEB頁面中的操作指令進行掃描識別，然后根據掃描后的指令結果進行數據編譯，將視圖進行初始化設置。當軟件開始運行時，OBSERVER的監控功能就會發揮出其應用的作用和價值，將所獲取到的數據屬性變化通知給DEP，在DEP中查找與該屬性相同的對象所對應的用戶，從而進行視圖的實時更新。

2.4 在Vue.js軟件中MVVM運行模式研究

隨著現代互聯網科技的快速發展，用戶對于WEB前端框架的應用體驗、對于軟件的交互式操作流程以及對外觀的要求變得越來越高。對于WEB系統中的數據處理以及業務的邏輯操作形式更偏向于前端框架，這就致使WEB前端的工作量變得更大，使數據的代碼輸入量增大。如果仍舊按照傳統的軟件開發形式進行WEB前端的開發設計就會造成前期開發的時間長、后期的運營維護的難度變大，軟件的擴展操作性變得更差。

為了提升對軟件功能的開發速度、開發效率以及數據編程代碼的復制使用率，現在很多的專業技術人員將功能的開發轉向了網頁框架結構方面。先后推出了網頁開發制作的MVC和MVVM兩種模式，為WEB的前端開發構建了基礎平臺。基于MVVM模式下的輕量級響應式框架結構的Vue.js設計與應用研究，技術人員通過對Vue.js框架的設計來實現對MVC模式的簡化設計。這也是一種典型的設計方案，對軟件開發的項目工程進行邏輯層次劃分，將具體的項目數據、功能視圖和邏輯思維操作進行合理化的分層劃分設計。

MVC的項目中主要包含著軟件的視圖界面，即VIEW、網頁視圖節目所需要的數據信息，即MODEL以及控制器CONTROLLER，他們協調工作形成了MVC，即這三者的首字母所寫組合。在實際的運用過程中視圖的界面和視圖界面所需的數據資源這兩者之間是沒有聯系的，兩者之間是單向的；這一點對于軟件的開發和使用有一定的弊端，隨之在此基礎上出現了MVVM開發形式。

Vue.js軟件并不是普通的入侵式前端框架結構資源庫，在配合其他數據庫的使用過程中，Vue.js軟件能夠提供龐大的空間。Vue.js軟件的核心默認功能不包含路由功能和AJAX功能，它通常實在建立一個應用之中的假定模塊構建系統，在使用Vue.js軟件時能夠有效的去除DOM帶來的繁瑣應用操作。在使用過程中只需要進行數據源頭信息的監控和關注即可，不需要擔心因DOM數據元素發生變化之后的數據綁定變化的發生，這也是數據信息驅動與DOM驅動之間的差別。

3 Vue.js軟件與React.js軟件的對比分析

React.js軟件是FACEBOOK公司自主研發制作的軟件項目，它的前段框架設計都是采用傳統的MVC模式進行設計的，但這傳統的運行模式是很難能夠滿足于FACEBOOK公司的使用需求的，這在當時也是一向很龐大的系統軟件開發項目，它包含著非常復雜的邏輯思維結構和復雜繁瑣的程序應用代碼。對于Vue.js軟件與React.js軟件，這兩款軟件之間是存在很多的相似之處的：首先，它們都在使用Virtual DOM；它們都能夠提供響應式和組件化的視圖結構組件；這兩款軟件在使用過程中都能夠將使用者的注意力集中保持在核心庫中。

而對于Vue.js軟件與React.js軟件之間的不同之處，當軟件在對外界用戶的視圖界面進行渲染時，要通過對REACT和VUE通過抽象來對DOM的操作進行降低，而對于DOM的操作還需要減少對其功能使用的消耗，如：一些繁雜無味的頁面運算等，這就是Vue.js軟件與React.js軟件之間存在的不同之處。在軟件的實際運行操作中，經過優化處理的VUE要比未經過處理的REACT運行速度快很多，因為在開發設計過程中VUE通過渲染性的功能改進，能夠優化出更加適合于用戶使用的界面。

4 結 語

Vue.js的輕量級響應式框架的應用能夠更好的與html與js之間的協助，能夠與微信公眾平臺的前端軟件框架更好的融洽配合使用，而且還不會影響到現有的功能操作，還能夠在原有的基礎上開發出更加精準的就算是在相對復雜的場景之中進行操作也不會出現錯誤問題。大數據驅動時代取代了傳統繁瑣的dom驅動程序，同時也避免了大量的選擇器復雜程序，改革后只需要對數據的源頭信息進行關注即可，能夠有效的縮短開發的用時，降低開發的難度，提升用戶的效用效果。

主要參考文獻

[1]易劍波.基于 MVVM 模式的 WEB 前端框架的研究.[J].信息與電腦：理論版，2016（19）.

[2]江慶，葉浩榮.Vue+Webpack 框架在銀行 App 前端開發的應用[J].金融科技時代，2016（11）.

[3]孫娉娉，李新，史廣軍.基于前后端分離的內容管理系統.[J].科研信息化技術與應用，2016（4）.

[4]麥冬，陳濤，梁宗灣.輕量級響應式框架 Vue.js 應用分析[J].信息與電腦：理論版，2017（7）.