Vue面試題之vue實現MVVM資料繫結

2022-02-26 18:33:52 字數 1249 閱讀 6648

什麼是mvvm?

mvvm是model-view-viewmodel,是把乙個系統分為了模型(model)、檢視(view)和view-model三個部分。vue是乙個典型的mvvm思想,資料驅動檢視

通俗一點就是view層不直接和model層通訊,他們只能通過view-model層通訊。

vue中mvvm的理解

vue是乙個mvvm漸進式框架,mvvm是vue的實際模式,在vue框架中資料會自動驅動檢視。我們寫vue就知道它的單檔案元件開發方式。

model:資料層,僅僅關注資料本身,不關心任何行為。

對應vue元件中的data,props屬性。

view:檢視層,使用者操作頁面,當view-model對model更新的時候,會通過資料繫結更新到view。

對應vue元件中的template和style的部分。

viewmodel:業務邏輯層,view需要什麼資料,viewmodel就提供什麼資料,view有些哪些操作,viewmodel就要響應這些操作;view和viewmodel兩種互動方式:雙向資料傳遞(資料屬性和data binding)和單向傳遞操作(命令屬性);由於viewmodel的雙向資料繫結,當model發生變化時,viewmodel就會更新,viewmodel變化,model也會更新。

對應繼承vue類的元件例項

vue在mvvm思想下,view和model沒有直接聯絡,但是view和view-model、model和view-model之間是會互動的。當view檢視進行dom操作等使資料發生變化時,可以通過view-model同步到model中,同樣的model資料變化也會同步到vue中。

mvvm的資料繫結實現vue資料劫持結合發布者-訂閱者模式

vue是採用資料劫持結合發布者-訂閱者模式的方式,通過object.defineproperty()來劫持(監聽)各個屬性的settergetter,在資料(物件)發生變動時發布訊息給訂閱者,觸發相應的監聽**。

因此,要實現mvvm的雙向繫結就必須要實現以下幾點:

vue面試題之vue實現mvvm資料繫結

vue面試題 vue原理

1.元件化和mvvm 2.響應式原理 3.vdom 和 diff 演算法 4.模板編譯 5.元件渲染過程 6.前端路由 元件化基礎 1.很久以前 的元件化 asp jsp php 已經有元件化 nodejs 中已有類似元件化 2.資料驅動檢視 vue mvvm 3.資料驅動檢視 react sets...

vue面試題目

1,vue元件通訊 1 父子元件之間的通訊 父 子 子元件中props引數,父元件中引入子元件,在子元件上面繫結所需的值 eg 子元件中 父元件中 子 父 emit v on方法,子元件中,繫結方法a,通過 emit觸發父元件中的方法,順便傳參到父元件 eg 子元件中 showsearchmodal...

Vue之面試題

1 說下vue資料雙向繫結的原理 2 說說vuex的作用以及應用場景 3 說說vue元件的資料通訊方式 4 vue的原始碼有看過嗎?說說vuex工作原理 5 為什麼說虛擬 dom會提高效能,解釋一下它的工作原理 6 請你詳細介紹一些 package.json 裡面的配置 7 為什麼說vue是一套漸進...