VUE的MVVM框架解析

2022-07-20 20:09:15 字數 824 閱讀 7623

view:也很簡單,就是展現出來的使用者介面。

基本上,絕大多數軟體所做的工作無非就是從資料儲存中讀出資料,展現到使用者介面上,然後從使用者介面接收輸入,寫入到資料儲存裡面去。所以,對於資料儲存(model)和介面(view)這兩層,大家基本沒什麼異議。但是,如何把model展現到view上,以及如何把資料從view寫入到model裡,不同的人有不同的意見。

mvc派的看法是,介面上的每個變化都是乙個事件,我只需要針對每個事件寫一堆**,來把使用者的輸入轉換成model裡的物件就行了,這堆**可以叫controller。

而mvvm派的看法是,我給view裡面的各種控制項也定義乙個對應的資料物件,這樣,只要修改這個資料物件,view裡面顯示的內容就自動跟著重新整理,而在view 裡做了任何操作,這個資料物件也跟著自動更新,這樣多美。所以:

viewmodel:就是與介面(view)對應的model。因為,資料庫結構往往是不能直接跟介面控制項一一對應上的,所以,需要再定義乙個資料物件專門對應view上的控制項。而viewmodel的職責就是把model物件封裝成可以顯示和接受輸入的介面資料物件。

至於viewmodel的資料隨著view自動重新整理,並且同步到model裡去,這部分**可以寫成公用的框架,不用程式設計師自己操心了。

簡單的說,viewmodel就是view與model的聯結器,view與model通過viewmodel實現雙向繫結。(引用三聯,阮一峰)。

VUE的MVVM框架解析

view 也很簡單,就是展現出來的使用者介面。基本上,絕大多數軟體所做的工作無非就是從資料儲存中讀出資料,展現到使用者介面上,然後從使用者介面接收輸入,寫入到資料儲存裡面去。所以,對於資料儲存 model 和介面 view 這兩層,大家基本沒什麼異議。但是,如何把model展現到view上,以及如何...

Vue 實現mvvm框架

observe obj 訂閱 key 資料 if this.binding key let binding this.binding key 重寫getter,setter object.defineproperty obj,key,set newval proxydata data,vm set ...

Vue中的MVVM框架

viewmodel 資料雙向繫結 場景 針對具有複雜互動邏輯的前段應用 提供基礎的架構抽象 通過ajax資料持久化,保證前端使用者體驗 什麼是vue.js?是乙個輕量級的mvvm框架 資料驅動 元件化的前端開發 github超過25k 的star數,社群完善 vue對比angular,react v...