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

2021-09-20 21:59:23 字數 378 閱讀 5463

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

大家想測試,就將五個檔案的**複製下來,執行一下。

執行的同時給大家配一張圖,讓大家容易理解。(這張是盜圖,不知哪位大神用visio畫的,這裡我就直接引用了)

賞 謝謝你請我吃糖果

用原生JS模擬雙向繫結

雙向繫結 這裡的雙向繫結分兩步實現,一是從js的變數繫結到dom 也就是顯示的html檔案 二是從dom繫結到js的變數。對一般的object,可以使用getter和setter實現該效果。對於array,可以修改原型實現,這裡的實現是參考如何監聽 js 中變數的變化?這裡用到的時object.de...

模擬Vue雙向資料繫結

function eventemit this.callbacks eventemit.prototype.on function eventname,fn this.callbacks eventname push fn eventemit.prototype.emit function even...

原生js實現資料雙向繫結

最近接觸了vue,在談到 vue等等的 mvvm 框架之前,先了解什麼是資料雙向繫結以及如何利用原生 js實現資料雙向繫結 單向資料繫結 指先把模板寫好,然後把模板和資料 資料可能來自後台 整合到一起形成html 然後把這段 html 插入到文件流裡 缺點 一旦html 生成就沒有辦法改變,如果有新...