加入星計(jì)劃,您可以享受以下權(quán)益:

  • 創(chuàng)作內(nèi)容快速變現(xiàn)
  • 行業(yè)影響力擴(kuò)散
  • 作品版權(quán)保護(hù)
  • 300W+ 專業(yè)用戶
  • 1.5W+ 優(yōu)質(zhì)創(chuàng)作者
  • 5000+ 長(zhǎng)期合作伙伴
立即加入
  • 正文
    • 1、MVVM模型
    • 2、數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
    • 3、虛擬DOM機(jī)制
    • 4、總結(jié)
  • 推薦器件
  • 相關(guān)推薦
  • 電子產(chǎn)業(yè)圖譜
申請(qǐng)入駐 產(chǎn)業(yè)圖譜

五分鐘技術(shù)趣談 | 淺談Vue2中MVVM的實(shí)現(xiàn)

2023/11/20
2955
閱讀需 12 分鐘
加入交流群
掃碼加入
獲取工程師必備禮包
參與熱點(diǎn)資訊討論

作者:李嘉玉,單位:中移物聯(lián)網(wǎng)有限公司

Vue.js是一款適用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。它由尤雨溪在2014年推出,并迅速成為最流行的前端框架之一。Vue.js的設(shè)計(jì)目標(biāo)是通過簡(jiǎn)單、靈活的API,提供一種高效、可復(fù)用和響應(yīng)式的方式來(lái)構(gòu)建現(xiàn)代化的Web應(yīng)用程序。自Vue發(fā)行以來(lái),就受到了國(guó)內(nèi)外爆發(fā)式的關(guān)注,如今已經(jīng)成為了最流行的前端框架之一,并且其已經(jīng)具有了龐大的生態(tài)系統(tǒng)。Vue框架采用了MVVM的設(shè)計(jì)模式,本文簡(jiǎn)單介紹Vue2中MVVM的實(shí)現(xiàn)。

Vue.js作為一款流行的前端框架,其整體框架的設(shè)計(jì)采用了前端框架中常用的MVVM設(shè)計(jì)模式,將視圖與數(shù)據(jù)相互解耦,分離了關(guān)注點(diǎn)并支持雙向數(shù)據(jù)綁定,使得頁(yè)面的變化呈響應(yīng)式,能夠根據(jù)數(shù)據(jù)的變化而自動(dòng)更新視圖。而Vue對(duì)MVVM模型的實(shí)現(xiàn)離不開數(shù)據(jù)的雙向綁定以及虛擬DOM的頁(yè)面渲染機(jī)制。本文接下來(lái)將從Vue的MVVM模型、數(shù)據(jù)雙向綁定的實(shí)現(xiàn)以及虛擬DOM機(jī)制分別展開介紹。

1、MVVM模型

MVVM即Model-View-ViewModel,是前端三大MV*(MVC、MVP、MVVM)模型之一,是 MVC 模型的改進(jìn)版本。MVVM模型通過數(shù)據(jù)雙向綁定的方式來(lái)解耦視圖和模型,有助于從概念層面上將圖形用戶界面的開發(fā)與業(yè)務(wù)邏輯或后端邏輯的開發(fā)分離開來(lái),從而使視圖不依賴于任何特定的模型平臺(tái),其優(yōu)勢(shì)在于明確地分離了界面和業(yè)務(wù)邏輯,使代碼更易于維護(hù)、重用和測(cè)試。MVVM指代了三個(gè)部分,具體如下:

1.Model(模型):模型代表著應(yīng)用程序中的數(shù)據(jù)和業(yè)務(wù)邏輯。在Vue.js中,模型可以是應(yīng)用程序的數(shù)據(jù)對(duì)象、服務(wù)端API返回的數(shù)據(jù),或者其他需要進(jìn)行處理和展示的數(shù)據(jù)。

2.View(視圖):視圖是用戶界面的可見部分,即用戶所看到和與之交互的界面元素。在Vue.js中,視圖由模板(Template)來(lái)定義,模板是一種聲明式的HTML擴(kuò)展語(yǔ)法,在模板中可以使用Vue的指令、插值表達(dá)式等來(lái)動(dòng)態(tài)渲染數(shù)據(jù)。

3.ViewModel(視圖模型)視圖模型是連接視圖和模型的橋梁,負(fù)責(zé)處理視圖和模型之間的數(shù)據(jù)交互和邏輯控制。在Vue.js中,視圖模型由Vue實(shí)例來(lái)表示,它是一個(gè)JavaScript對(duì)象,包含了模板中所需的數(shù)據(jù)、方法和計(jì)算屬性等。

MVVM開發(fā)模式架構(gòu)圖

在Vue中,上圖Controller的功能便是通過數(shù)據(jù)的雙向綁定來(lái)實(shí)現(xiàn)的,而數(shù)據(jù)引發(fā)視圖的更新則是通過虛擬DOM來(lái)實(shí)現(xiàn)的。在運(yùn)用MVVM設(shè)計(jì)模式的情況下,Vue的工作原理如下:

當(dāng)用戶與視圖進(jìn)行交互(例如點(diǎn)擊按鈕、輸入表單等),視圖觸發(fā)相應(yīng)的事件。

視圖模型監(jiān)聽這些事件,并根據(jù)業(yè)務(wù)邏輯更新模型的數(shù)據(jù)。

當(dāng)數(shù)據(jù)發(fā)生變化時(shí),模型發(fā)送通知給視圖模型,視圖模型根據(jù)變化更新視圖。

視圖根據(jù)最新的數(shù)據(jù)重新渲染,展示給用戶。

上述過程主要為數(shù)據(jù)更新時(shí)的執(zhí)行邏輯,這個(gè)過程在Vue整個(gè)生命周期中屬于更新階段。而Vue 的生命周期實(shí)際上就是 Vue 組件從創(chuàng)建到銷毀的整個(gè)過程,被分為了四個(gè)階段,八個(gè)鉤子函數(shù)(可以理解為事件回調(diào)函數(shù))。分別為創(chuàng)建階段、掛載階段、更新階段、銷毀階段,MVVM中視圖與模型的初始化和數(shù)據(jù)雙向綁定則在創(chuàng)建階段的beforeCreate以及掛在階段的mounted中實(shí)現(xiàn)。

2、數(shù)據(jù)雙向綁定的實(shí)現(xiàn)

Vue數(shù)據(jù)雙向綁定的實(shí)現(xiàn)實(shí)質(zhì)上也就是MVVM中Controller的實(shí)現(xiàn)。Vue的數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布/訂閱者的模式實(shí)現(xiàn)的,而數(shù)據(jù)劫持在Vue底層是通過Object.defineProperty()方法實(shí)現(xiàn)的。Object.defineProperty()方法是原生JS提供的一個(gè)定義對(duì)象屬性的接口,通過該方法的get和set配置項(xiàng)可以實(shí)現(xiàn)在一個(gè)對(duì)象中代理另一個(gè)對(duì)象的屬性變化,即getter和setter,這使得我們?cè)谠L問或修改對(duì)象的屬性時(shí)可以執(zhí)行自定義的邏輯。

在Vue中,當(dāng)我們定義一個(gè)響應(yīng)式數(shù)據(jù)時(shí),Vue會(huì)將該數(shù)據(jù)轉(zhuǎn)化為一個(gè)稱為“響應(yīng)式代理對(duì)象”的對(duì)象(data配置項(xiàng)中的屬性)。在這個(gè)代理對(duì)象中,Vue就會(huì)使用Object.defineProperty()方法為對(duì)象中所有屬性定義一個(gè)getter和setter。從而當(dāng)我們?cè)L問響應(yīng)式代理對(duì)象的屬性時(shí),Vue的getter會(huì)被觸發(fā),從而執(zhí)行一些與數(shù)據(jù)相關(guān)的邏輯,例如依賴追蹤和通知訂閱者。而當(dāng)我們修改響應(yīng)式代理對(duì)象的屬性時(shí),Vue的setter會(huì)被觸發(fā),它會(huì)接收新的值并執(zhí)行一些對(duì)應(yīng)的更新操作,例如觸發(fā)視圖重新渲染。這種方式稱為“劫持”或“攔截”對(duì)象的訪問和修改操作,以實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式。

在Vue劫持了所有需要監(jiān)聽的所有屬性后,結(jié)合Vue的消息發(fā)布-訂閱模式,每當(dāng)數(shù)據(jù)變化就會(huì)通過消息發(fā)布-訂閱模式的方式監(jiān)測(cè)到數(shù)據(jù)的變化,并重新編譯視圖以此實(shí)現(xiàn)響應(yīng)式。Vue中數(shù)據(jù)雙向綁定機(jī)制如圖所示,其中Dep 是訂閱收集器。

Vue雙向綁定原理

其中,Vue的數(shù)據(jù)監(jiān)測(cè)也是通過數(shù)據(jù)劫持的方式實(shí)現(xiàn)的,但Vue只會(huì)對(duì)對(duì)象進(jìn)行數(shù)據(jù)劫持為其生成setter和getter,而對(duì)于數(shù)組Vue并不會(huì)對(duì)其進(jìn)行數(shù)據(jù)劫持。對(duì)于數(shù)組Vue的處理方式是監(jiān)測(cè)數(shù)組數(shù)據(jù)調(diào)用的方法,當(dāng)調(diào)用了能夠改變?cè)瓟?shù)組的方法時(shí),Vue會(huì)將該方法進(jìn)行二次封裝。原本這些方法只做了他們?cè)驹撟龅氖虑?,但Vue包裝過之后,還加了一件事進(jìn)去,即重新解析頁(yè)面生成虛擬DOM并執(zhí)行diff算法生成新的DOM結(jié)構(gòu),交給瀏覽器進(jìn)行頁(yè)面的更新渲染,以此實(shí)現(xiàn)對(duì)數(shù)組數(shù)據(jù)改變的響應(yīng)。但是值得注意的是,那些不會(huì)引起原數(shù)組改變的方法以及通過數(shù)組索引直接進(jìn)行修改而沒有調(diào)用任何方法的情況,Vue并不會(huì)監(jiān)測(cè)到,因此也不會(huì)出現(xiàn)響應(yīng)式的效果。

3、虛擬DOM機(jī)制

Vue的虛擬DOM是一種在內(nèi)存中維護(hù)的輕量級(jí)DOM樹,在頁(yè)面初始渲染時(shí)生成,虛擬DOM機(jī)制的原理如下:

1)生成虛擬DOM:當(dāng)Vue組件首次渲染時(shí),會(huì)生成一個(gè)虛擬DOM樹,稱為初始虛擬 DOM。這棵樹的結(jié)構(gòu)與實(shí)際的DOM結(jié)構(gòu)相似,但是只是在內(nèi)存中存在,并沒有直接渲染到頁(yè)面上。

2)更新虛擬DOM:當(dāng)組件的狀態(tài)發(fā)生變化時(shí),Vue 會(huì)生成一個(gè)新的虛擬DOM樹,稱為更新虛擬DOM。該樹與初始虛擬DOM相比,只有發(fā)生變化的部分會(huì)被重新創(chuàng)建,其余部分則會(huì)被復(fù)用。

3)對(duì)比并計(jì)算差異:Vue會(huì)對(duì)比初始虛擬DOM和更新虛擬DOM,找出兩棵樹之間的差異。這個(gè)過程稱為虛擬DOM的diff算法。通過這個(gè)算法,Vue可以高效地找出需要進(jìn)行修改、添加或移除的節(jié)點(diǎn)。

4)批量更新真實(shí)DOM:根據(jù)差異的計(jì)算結(jié)果,Vue會(huì)將需要進(jìn)行修改的部分同步到實(shí)際的DOM中。由于虛擬DOM是在內(nèi)存中操作的,因此可以通過批量更新的方式,將多個(gè)DOM修改操作合并為一個(gè),從而減少實(shí)際的DOM操作,提高性能。

虛擬DOM原理

在常規(guī)的直接操作實(shí)際DOM的方式下,頁(yè)面數(shù)據(jù)的每次改變都會(huì)引發(fā)瀏覽器重新計(jì)算和渲染整個(gè)DOM樹。這種操作會(huì)涉及到大量的DOM訪問和修改,而這些操作通常是相對(duì)較慢的,尤其在涉及復(fù)雜的頁(yè)面結(jié)構(gòu)和大量的DOM元素時(shí)。在數(shù)據(jù)發(fā)生改變需要重新解析頁(yè)面結(jié)構(gòu)的時(shí)候,Vue并不是直接將解析的頁(yè)面結(jié)構(gòu)直接交給瀏覽器渲染,而是先根據(jù)虛擬DOM采用Diff算法計(jì)算出DOM中更新的部分,然后只交給瀏覽器更新的部分去渲染,從而減少瀏覽器對(duì)DOM的操作和頁(yè)面的重排重構(gòu),提高瀏覽器解析頁(yè)面的性能。所以本質(zhì)上來(lái)說(shuō),虛擬DOM是利用了JS代碼的運(yùn)行速度來(lái)減負(fù)了瀏覽器更新DOM的消耗。

4、總結(jié)

在Vue中,MVVM的實(shí)現(xiàn)主要是通過數(shù)據(jù)雙向綁定以及虛擬DOM實(shí)現(xiàn)的,在Vue中的具體實(shí)現(xiàn)則是通過Vue實(shí)例來(lái)完成的。在Vue實(shí)例的生命周期中,在創(chuàng)建階段生成Vue實(shí)例完成ViewModel的初始化;在掛載階段使用Object.defineProperty()方法來(lái)劫持和觀察數(shù)據(jù)對(duì)象的屬性訪問和修改,完成數(shù)據(jù)與視圖的數(shù)據(jù)雙向綁定;在更新階段應(yīng)用虛擬DOM+Diff算法來(lái)高效地確定需要進(jìn)行修改、添加或刪除的節(jié)點(diǎn)并將更新的節(jié)點(diǎn)交給瀏覽器渲染,而不是直接操作實(shí)際的DOM,提高了渲染效率。需要注意的是,在Vue中,虛擬DOM主要用于優(yōu)化渲染性能,而非作為實(shí)現(xiàn)MVVM的核心機(jī)制。數(shù)據(jù)的雙向綁定才是MVVM模型的主要實(shí)現(xiàn)方式,虛擬DOM則是為了提高性能而引入的輔助手段。這樣,通過Vue實(shí)例作為ViewModel,開發(fā)者能夠更方便地管理和操作應(yīng)用的界面和數(shù)據(jù),實(shí)現(xiàn)了視圖和數(shù)據(jù)模型之間的雙向綁定,使代碼更具可讀性和可維護(hù)性。

推薦器件

更多器件
器件型號(hào) 數(shù)量 器件廠商 器件描述 數(shù)據(jù)手冊(cè) ECAD模型 風(fēng)險(xiǎn)等級(jí) 參考價(jià)格 更多信息
TCAN1042VDRBRQ1 1 Texas Instruments Automotive fault-protected CAN transceiver with I/O level shifting and flexible data-rate 8-SON -55 to 125

ECAD模型

下載ECAD模型
$7.05 查看
KSZ9031RNXIA 1 Microchip Technology Inc DATACOM, ETHERNET TRANSCEIVER

ECAD模型

下載ECAD模型
$8.49 查看
AD9361BBCZ-REEL 1 Analog Devices Inc RF Agile Transceiver

ECAD模型

下載ECAD模型
暫無(wú)數(shù)據(jù) 查看
中國(guó)移動(dòng)

中國(guó)移動(dòng)

中國(guó)移動(dòng)有限公司(「本公司」,包括子公司合稱為「本集團(tuán)」)于1997年9月3日在香港成立,本集團(tuán)在中國(guó)內(nèi)地所有三十一個(gè)省、自治區(qū)、直轄市以及香港特別行政區(qū)提供通信和信息服務(wù),業(yè)務(wù)主要涵蓋個(gè)人、家庭、政企和新興市場(chǎng)的語(yǔ)音、數(shù)據(jù)、寬帶、專線、IDC、云計(jì)算、物聯(lián)網(wǎng)等,是中國(guó)內(nèi)地最大的通信和信息服務(wù)供應(yīng)商,亦是全球網(wǎng)絡(luò)和客戶規(guī)模最大、盈利能力領(lǐng)先、市值排名位居前列的世界級(jí)通信和信息運(yùn)營(yíng)商。

中國(guó)移動(dòng)有限公司(「本公司」,包括子公司合稱為「本集團(tuán)」)于1997年9月3日在香港成立,本集團(tuán)在中國(guó)內(nèi)地所有三十一個(gè)省、自治區(qū)、直轄市以及香港特別行政區(qū)提供通信和信息服務(wù),業(yè)務(wù)主要涵蓋個(gè)人、家庭、政企和新興市場(chǎng)的語(yǔ)音、數(shù)據(jù)、寬帶、專線、IDC、云計(jì)算、物聯(lián)網(wǎng)等,是中國(guó)內(nèi)地最大的通信和信息服務(wù)供應(yīng)商,亦是全球網(wǎng)絡(luò)和客戶規(guī)模最大、盈利能力領(lǐng)先、市值排名位居前列的世界級(jí)通信和信息運(yùn)營(yíng)商。收起

查看更多

相關(guān)推薦

電子產(chǎn)業(yè)圖譜

移動(dòng)Labs是中國(guó)移動(dòng)的社交化新媒體平臺(tái),是面向外部行業(yè)及產(chǎn)業(yè)鏈合作伙伴的信息發(fā)布、業(yè)務(wù)發(fā)展和產(chǎn)業(yè)推進(jìn)門戶。