原生js模擬vue實現雙向數據綁定

原生js模擬vue實現雙向數據綁定

寫在前面

vue.js是mvvm模式的框架，如圖:

通過和傳統mvc模式的對比，我們發現多了個ViewModel,沒有控制器(controller)了。ViewModel是mvvm模式的精髓所在它連接了view(視圖層)與model（數據模型），view或model發生改變，他們對應的model和view也會發生改變，非常方便。尤其是在做表單類型業務的時候深感欣慰。
它自帶了雙向數據綁定，使我們的開發變得便捷而快速。那麼它的底層是如何實現的呢？
還是看圖，一目瞭然：
簡而言之，要實現mvvm的雙向綁定，是採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。
具體細節就不詳細介紹了，大家可自行百度。此篇文章是介紹怎麼用原生js實現雙向數據綁定。

原生js實現雙向數據綁定

第一步 編寫html結構

只需要一個input框和一個p標籤即可

第二步 編寫js, 重點：Object.defineProperty()

該方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

第三步 監聽鍵盤事件

完整代碼

註釋很詳細了，相信大家都能看懂。

說在後面

Object.defineProperty()，這個方法非常重要，也很經典。本人後續會新開一篇專門講它，感興趣的可以持續關注。
覺得本文中能幫到你的可以點贊轉發，轉發請註明出處。