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

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

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

Vue.js作為一款流行的前端框架，其整體框架的設(shè)計(jì)采用了前端框架中常用的MVVM設(shè)計(jì)模式，將視圖與數(shù)據(jù)相互解耦，分離了關(guān)注點(diǎn)并支持雙向數(shù)據(jù)綁定，使得頁面的變化呈響應(yīng)式，能夠根據(jù)數(shù)據(jù)的變化而自動(dòng)更新視圖。而Vue對MVVM模型的實(shí)現(xiàn)離不開數(shù)據(jù)的雙向綁定以及虛擬DOM的頁面渲染機(jī)制。本文接下來將從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ù)雙向綁定的方式來解耦視圖和模型，有助于從概念層面上將圖形用戶界面的開發(fā)與業(yè)務(wù)邏輯或后端邏輯的開發(fā)分離開來，從而使視圖不依賴于任何特定的模型平臺(tái)，其優(yōu)勢在于明確地分離了界面和業(yè)務(wù)邏輯，使代碼更易于維護(hù)、重用和測試。MVVM指代了三個(gè)部分，具體如下：

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

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

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

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

在Vue中，上圖Controller的功能便是通過數(shù)據(jù)的雙向綁定來實(shí)現(xiàn)的，而數(shù)據(jù)引發(fā)視圖的更新則是通過虛擬DOM來實(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è)定義對象屬性的接口，通過該方法的get和set配置項(xiàng)可以實(shí)現(xiàn)在一個(gè)對象中代理另一個(gè)對象的屬性變化，即getter和setter，這使得我們在訪問或修改對象的屬性時(shí)可以執(zhí)行自定義的邏輯。

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

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

Vue雙向綁定原理

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

3、虛擬DOM機(jī)制

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

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

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

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

4、總結(jié)

在Vue中，MVVM的實(shí)現(xiàn)主要是通過數(shù)據(jù)雙向綁定以及虛擬DOM實(shí)現(xiàn)的，在Vue中的具體實(shí)現(xiàn)則是通過Vue實(shí)例來完成的。在Vue實(shí)例的生命周期中，在創(chuàng)建階段生成Vue實(shí)例完成ViewModel的初始化；在掛載階段使用Object.defineProperty()方法來劫持和觀察數(shù)據(jù)對象的屬性訪問和修改，完成數(shù)據(jù)與視圖的數(shù)據(jù)雙向綁定；在更新階段應(yīng)用虛擬DOM+Diff算法來高效地確定需要進(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ù)性。