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

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

1 在Vue.js中的MVVM模式

傳統(tǒng)的MVC模式是軟件工程中一種經(jīng)典的設(shè)計(jì)模式, 它是對(duì)一個(gè)項(xiàng)目工程進(jìn)行邏輯層次的劃分, 將項(xiàng)目數(shù)據(jù), 功能視圖與邏輯操作進(jìn)行分層設(shè)計(jì)。其中MVC分別是Model, View和Controller首字母的縮寫, 在項(xiàng)目中, 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ū)動(dòng)的UI平臺(tái)的開發(fā)。即View的變化會(huì)自動(dòng)更新到View Model, 而View Model的變化也會(huì)自動(dòng)同步到View上顯示。MVVM的本質(zhì)是通過數(shù)據(jù)綁定鏈接View和Model, 讓數(shù)據(jù)的變化自動(dòng)映射為視圖的更新。

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

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

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

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

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

3 Vue.js與React.js的對(duì)比

React.js最早的時(shí)候是Facebook公司的自己做的一個(gè)項(xiàng)目, 當(dāng)時(shí)的前端框架都是基于傳統(tǒng)的MVC模式, 但是傳統(tǒng)的MVC卻很難滿足Facebook公司當(dāng)時(shí)的要求。因?yàn)楫?dāng)時(shí)項(xiàng)目是一個(gè)很龐大的項(xià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)勢(shì)所在, 所以這里不再對(duì)相似之處進(jìn)行贅述。

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

為了客觀的得到實(shí)驗(yàn)結(jié)果, 筆者對(duì)實(shí)驗(yàn)項(xiàng)目進(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通常也會(huì)慢于開箱即用的Vue。

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