雙向資料繫結和單項資料繫結的認識

2022-08-20 04:06:07 字數 1248 閱讀 1984

參考文章:

單向資料繫結:指的是我們先把模板寫好,然後把模板和資料(資料可能來自後台)整合到一起形成html**,然後把這段html**插入到文件流裡面。

單向資料繫結缺點:html**一旦生成完以後,就沒有辦法再變了,如果有新的資料來了,那就必須把之前的html**去掉,再重新把新的資料和模板一起整合後插入到文件流中。

雙向資料繫結:資料模型(module)和檢視(view)之間的雙向繫結。

使用者在檢視上的修改會自動同步到資料模型中去,同樣的,如果資料模型中的值發生了變化,也會立刻同步到檢視中去。

雙向資料繫結的優點是無需進行和單向資料繫結的那些crud(create,retrieve,update,delete)操作

雙向資料繫結最經常的應用場景就是表單了,這樣當使用者在前端頁面完成輸入後,不用任何操作,我們就已經拿到了使用者的資料存放到資料模型中了。

目前。實現雙向資料繫結的前端框架主要有angularjs,vuejs(通過引入vuex來實現單項的資料監控)等 

大名鼎鼎的angular實現雙向繫結的原理就是通過$watch來進行髒檢查,但是這種髒效率很如果是大量的檢查那就不敢想象了。

單項資料和雙向資料使用的場景

單向繫結的優點是相應的可以帶來單向資料流,這樣做的好處是所有狀態變化都可以被記錄、跟蹤,狀態變化通過手動呼叫通知,源頭易追溯,沒有「暗箱操作」。同時元件資料只有唯一的入口和出口,使得程式更直觀更容易理解,有利於應用的可維護性。缺點則是**量會相應的上公升,資料的流轉過程變長,從而出現很多類似的樣板**。同時由於對應用狀態獨立管理的嚴格要求(單一的全域性store),在處理區域性狀態較多的場景時(如使用者輸入互動較多的「富表單型」應用),會顯得囉嗦及繁瑣。

基本上雙向繫結的優缺點就是單向繫結的映象了。優點是在表單互動較多的場景下,會簡化大量業務無關的**。缺點就是由於都是「暗箱操作」,我們無法追蹤區域性狀態的變化(雖然大部分情況下我們並不關心),潛在的行為太多也增加了出錯時 debug 的難度。同時由於元件資料變化**入口變得可能不止乙個,新手玩家很容易將資料流轉方向弄得紊亂,如果再缺乏一些「管制」手段,最後就很容易因為一處錯誤操作造成應用雪崩。

最後總結我們要通過自己的業務場景合理的選擇

雙向資料繫結

2 mvvm 2.總結mvvm 二 vue 2 實現mvvm主要包含兩個方面,資料變化更新檢視,檢視變化更新資料 最近面試時老被問到雙向資料繫結。明明概念看了好幾遍,也總結了好幾次,但是還是被問住 參考文章 很欣賞這篇部落格作者的一句話,再長的路,一步步也能走完。再短的路,不邁開雙腳也無法到達。送給...

雙向資料繫結

雙向資料繫結基於mvvm框架,vue屬於mvvm框架 mvvm m等於model,v等於view,即model改變影響view,view改變影響model 1.雙向資料繫結 必須在使用在表單裡面 使用v model繫結資料,實現動態資料變化 js export default 獲取動態資料 獲取表單...

vue的屬性繫結和雙向資料繫結

屬性繫結 v bind屬性繫結,使用如下,為div繫結了乙個title屬性 dell lee title hello world div v bind 可以縮寫為 dell lee title hello world div 雙向資料繫結 v model一般用於input等表單元素,例項裡的資料改變...