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

1 在Vue.js中的MVVM模式

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

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

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

2 Vue.js的運行原理

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

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

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

3 Vue.js與React.js的對比

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

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

1) 使用Virtual DOM。

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

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

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

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

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

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