陳巖

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

[關(guān)鍵詞] Vue.js；輕量級；響應(yīng)式框架；JavaScript；應(yīng)用研究

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

[中圖分類號] TP311 [文獻(xiàn)標(biāo)識碼] A [文章編號] 1673 - 0194（2018）03- 0181- 03

0 前 言

科學(xué)技術(shù)在快速的發(fā)展，推動了整個互聯(lián)網(wǎng)產(chǎn)業(yè)化發(fā)展進(jìn)程，在互聯(lián)網(wǎng)的產(chǎn)業(yè)發(fā)展中發(fā)展態(tài)勢最好的還是移動互聯(lián)網(wǎng)產(chǎn)業(yè)。移動互聯(lián)網(wǎng)產(chǎn)業(yè)在高速發(fā)展地過程中問題也就隨之出現(xiàn)了，技術(shù)的革新應(yīng)用如何才能夠滿足于移動互聯(lián)網(wǎng)的產(chǎn)業(yè)發(fā)展所需？在整個WEB項(xiàng)目發(fā)展中，前端是整個項(xiàng)目中最重要的組成部分，如何提升前端的技術(shù)發(fā)展也當(dāng)下需要重點(diǎn)研究項(xiàng)目。

1 Vue.js軟件介紹

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

2 Vue.js輕量級響應(yīng)式框架的應(yīng)用分析

2.1 WEBPACK的應(yīng)用研究

WEBPACK是軟件前端開發(fā)的打包工具，在應(yīng)用過程中每一次的打包都會進(jìn)行逐級的項(xiàng)目結(jié)構(gòu)分析，將數(shù)據(jù)定位在每一個js模塊以及其相關(guān)的CSS之中，并將二者合并在一起進(jìn)行打包處理。在使用WEBPACK項(xiàng)目模塊進(jìn)行操作時，由于會接觸到不同的加載器，這樣就會讓繁雜的開發(fā)程序分解成一個個獨(dú)立的小模塊，將復(fù)發(fā)化的WEB前端開發(fā)轉(zhuǎn)化成了分層次、分級別的小模塊化的軟件開發(fā)；對于項(xiàng)目的合并之后的文件壓縮，能夠大大提升文件的傳輸速度和軟件的運(yùn)行速度，通過不同的PLUGIN插件還能夠?qū)Τ绦蜻M(jìn)行加密處理，保證程序文件的安全性。

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

在發(fā)開構(gòu)建大型的應(yīng)用軟件時，通常都會選用NPM，因?yàn)镹PM能夠更好的配合，如：WEBPACK這類的打包軟件配合使用，能夠提升運(yùn)行的效果；Vue.js軟件能夠?yàn)橛脩籼峁┕俜绞跈?quán)的使用工具，能夠便于使用者在最短的時間內(nèi)構(gòu)建大型的單頁應(yīng)用程序；官方授權(quán)的工具中能夠提供即開即用的構(gòu)建工具配置。它具備現(xiàn)代化的WEB網(wǎng)頁前端開發(fā)設(shè)計(jì)使用流程，在安裝過程中只需要5分鐘就能夠創(chuàng)建出一個能夠重新載入、能夠保存靜態(tài)檢查以及符合于使用者使用環(huán)境的配置建構(gòu)。

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

2.3 Vue.js軟件的運(yùn)行原理分析

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

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

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

2.4 在Vue.js軟件中MVVM運(yùn)行模式研究

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

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

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

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

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

React.js軟件是FACEBOOK公司自主研發(fā)制作的軟件項(xiàng)目，它的前段框架設(shè)計(jì)都是采用傳統(tǒng)的MVC模式進(jìn)行設(shè)計(jì)的，但這傳統(tǒng)的運(yùn)行模式是很難能夠滿足于FACEBOOK公司的使用需求的，這在當(dāng)時也是一向很龐大的系統(tǒng)軟件開發(fā)項(xiàng)目，它包含著非常復(fù)雜的邏輯思維結(jié)構(gòu)和復(fù)雜繁瑣的程序應(yīng)用代碼。對于Vue.js軟件與React.js軟件，這兩款軟件之間是存在很多的相似之處的：首先，它們都在使用Virtual DOM；它們都能夠提供響應(yīng)式和組件化的視圖結(jié)構(gòu)組件；這兩款軟件在使用過程中都能夠?qū)⑹褂谜叩淖⒁饬斜３衷诤诵膸熘小?/p>

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

4 結(jié) 語

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

主要參考文獻(xiàn)

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

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

[3]孫娉娉，李新，史廣軍.基于前后端分離的內(nèi)容管理系統(tǒng).[J].科研信息化技術(shù)與應(yīng)用，2016（4）.

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