VueJs條件的WEB前端開發(fā)探究發(fā)布者：本站     時間：2020-05-05 12:05:47

科學(xué)技術(shù)在飛速發(fā)展, 隨之也帶動了整個互聯(lián)網(wǎng)產(chǎn)業(yè), 而在整個互聯(lián)網(wǎng)產(chǎn)業(yè)中發(fā)展勢頭最猛的要當(dāng)數(shù)移動互聯(lián)網(wǎng)產(chǎn)業(yè)了。移動互聯(lián)網(wǎng)的高速發(fā)展的同時卻也為互聯(lián)網(wǎng)技術(shù)帶來了嚴(yán)重考驗。那么在整個Web項目當(dāng)中, 前端在整個項目中的作用是不言而喻的, 如何能把前端技術(shù)變的越來越高效也是行業(yè)學(xué)者們茶余飯后的熱門話題。在這種大趨勢下, Vue.js橫空出世, 是時下最火的前端技術(shù)之一。下面筆者將帶你走入Vue.js的世界。

1 在Vue.js中的MVVM模式

傳統(tǒng)的MVC模式是軟件工程中一種經(jīng)典的設(shè)計模式, 它是對一個項目工程進(jìn)行邏輯層次的劃分, 將項目數(shù)據(jù), 功能視圖與邏輯操作進(jìn)行分層設(shè)計。其中MVC分別是Model, View和Controller首字母的縮寫, 在項目中, View是軟件的視圖界面, Model是為視圖界面所需的數(shù)據(jù), 控制器Controller是View和Model的協(xié)調(diào)者, View和Model不直接聯(lián)系, 基本聯(lián)系都是單向的。但是隨著互聯(lián)網(wǎng)飛速發(fā)展, 在此基礎(chǔ)上衍生出了MVVM開發(fā)模式。

MVVM模式的全稱為Model View View Model。它的側(cè)重點(diǎn)在于用事件驅(qū)動的UI平臺的開發(fā)。即View的變化會自動更新到View Model, 而View Model的變化也會自動同步到View上顯示。MVVM的本質(zhì)是通過數(shù)據(jù)綁定鏈接View和Model, 讓數(shù)據(jù)的變化自動映射為視圖的更新。

對于需要動態(tài)更新的DOM節(jié)點(diǎn)來說, Vue.js會為其創(chuàng)建一個指令對象。而對于指令對象來說, 如果其數(shù)據(jù)發(fā)生變化的時候, 便會對操作與之匹配的節(jié)點(diǎn), 進(jìn)行相應(yīng)的Dom操作。Vue為每個Dom操作都進(jìn)行了封裝, 使它們成為Vue特定指令, 這樣關(guān)于業(yè)務(wù)代碼量在無形之中得到了很好的改善, 對于系統(tǒng)的開發(fā)投入和日后的維護(hù)投入都得到了大大降低。

2 Vue.js的運(yùn)行原理

在介紹Vue.js運(yùn)行原理之前, 先要介紹幾個概念。Observer本質(zhì)是一個數(shù)據(jù)監(jiān)聽器, 不言而喻它是起到一個監(jiān)聽的作用, 對于數(shù)據(jù)對象中的所有屬性, 它都能夠?qū)ζ浔O(jiān)聽, 告知訂閱者哪些屬性發(fā)生了變化和發(fā)生了哪些變化。對于指令解析器Compile, 它是對Vue.js中的指令進(jìn)行掃描, 并對掃描后的指令進(jìn)行解析編譯。Watcher相當(dāng)于一個協(xié)調(diào)者, 它主要的作用是在Observer和Compile之間建立起連接, 它不但能夠接收來自O(shè)bserver的屬性變化通知, 而且從中起到一個調(diào)度的作用, 并執(zhí)行指令綁定的相應(yīng)的回調(diào)函數(shù), 從而更新視圖。

在Vue創(chuàng)建一個對象時, 首先會為這個對象進(jìn)行一個初始化的過程。在初始化的過程中, Observer會一直對這個對象所有的屬性進(jìn)行監(jiān)聽, 同時Compile會掃描Web頁面中的指令, 對掃描后的指令進(jìn)行編譯, 并會初始化視圖。而Watcher會在Dep中添加一個訂閱者。

當(dāng)系統(tǒng)一旦運(yùn)行起來, Observer監(jiān)聽器就會獲取屬性變化并通知Dep, 在Dep中會查找與該屬性對象對應(yīng)的訂閱者, 并向添加該訂閱者的Watcher發(fā)送變化通知, 從而對視圖進(jìn)行相應(yīng)的更新。

3 Vue.js與React.js的對比

React.js最早的時候是Facebook公司的自己做的一個項目, 當(dāng)時的前端框架都是基于傳統(tǒng)的MVC模式, 但是傳統(tǒng)的MVC卻很難滿足Facebook公司當(dāng)時的要求。因為當(dāng)時項目是一個很龐大的項目, 包含非常復(fù)雜的邏輯結(jié)構(gòu)和相當(dāng)多的程序代碼, 所以便誕生了React.js。

首先Vue.js與React.js是有很多相似之處:

1) 使用Virtual DOM。

2) 提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。

3) 將注意力集中保持在核心庫, 伴隨于此, 有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫。

本文側(cè)重比較Vue.js與React.js不同之處, 并通過比較體現(xiàn)Vue.js的優(yōu)勢所在, 所以這里不再對相似之處進(jìn)行贅述。

對于Vue.js與React.js不同之處筆者通過一個小例子進(jìn)行對比。當(dāng)我們對用戶界面進(jìn)行渲染時候, 為了降低Dom的操作React和Vue都是通過Virtual Dom抽象層來實現(xiàn)這一要求, 對于必要的Dom操作以外, 必須要減少另外功能的消耗, 比如一些頁面運(yùn)算等等。這就是Vue和React存在的不同之處。為了證明這點(diǎn), 我們建立了一個簡單的參照項目, 它負(fù)責(zé)渲染10000個列表項100次。

為了客觀的得到實驗結(jié)果, 筆者對實驗項目進(jìn)行了二十次的運(yùn)行, 并獲取各自運(yùn)行中產(chǎn)生的最好結(jié)果。通過運(yùn)行結(jié)果可以明顯的看出未經(jīng)優(yōu)化的Vue相比未經(jīng)優(yōu)化的React要快的多。由于Vue改進(jìn)過渲染性能, 甚至全面優(yōu)化過的React通常也會慢于開箱即用的Vue。

渲染性能只有Vue的強(qiáng)大性能之一, 相比其他前端庫Vue還具很多特點(diǎn), 首先Vue.js是一個輕量級的前端庫, 上手簡單, 對于新手來說不需要太多的時間就可以學(xué)會。對于DOM的更新, Vue使用了異步批量處理方式, 所以會非常快速, 同時它還可以將每個組件進(jìn)行一系列組合, 這樣對于程序的解耦性和重用性都得到了大大提高。