原生js實現資料雙向繫結

2022-05-04 01:42:07 字數 732 閱讀 4629

最近接觸了vue,在談到

vue等等的

mvvm

框架之前,先了解什麼是資料雙向繫結以及如何利用原生

js實現資料雙向繫結

單向資料繫結

指先把模板寫好,然後把模板和資料(資料可能來自後台)整合到一起形成html**,然後把這段

html

**插入到文件流裡

缺點:一旦html**生成就沒有辦法改變,如果有新資料重新傳入,就必須重新把模板和資料整合到一起插入到文件流中

資料雙向繫結

資料模型和檢視之間的雙向繫結,使用者在檢視上的修改會自動同步到資料模型中,同樣的,如果資料模型中的值發生變化,也會同步到檢視中去。

優點:無需進行類似單向資料繫結的那些crud操作。

最經常應用的場景:表單

缺點:應用場景有限

框架:angular js,vue js

底層實現大概有兩種:

1.手動繫結,同時使用

dirty check

去迴圈監聽。(代表

angular js

)2.前端資料劫持,使用

define property,(

代表vue js)

以下是乙個簡單的小例子,在input框裡輸入什麼,後面就會顯示什麼

**如下:

}執行效果如下

原生JS實現雙向繫結

現在框架都可以實現雙向繫結,vue中實現雙向繫結的原理是利用object.defineproperty 定義訪問器屬性要使用object.defineproperty,接收三個引數 屬性所在的物件,屬性的名字,乙個描述符物件。doctype html en utf 8 title title hea...

原生JS模擬Vue雙向資料繫結

童鞋們都應該知道vue2.x很重要的特性 資料雙向繫結 虛擬dom 所以在面試的時候就經常有面試官問小白同學說資料雙向繫結原理是什麼,虛擬dom是什麼,給我實現乙個唄。所以給大家展示乙個最簡的雙向繫結的案例,也參考了網上一些資料。至於虛擬dom的實現後面再說吧,網上資料也很多很全因為畢竟react都...

JS 實現雙向資料繫結

近幾年前端技術棧真是發展的太迅速了,從以前的針對dom操作的框架如jquery,ext.js等框架逐步過渡到當前的mvvm模式,讓前端開發者將注意力從dom操作逐漸解脫出來,專注於邏輯的實現,個人認為開發效率至少提公升了1倍,mvvm模式的乙個核心便是資料的雙向繫結。雙向資料繫結 上面說的是在vue...