一、數據單向綁定原理
指先把模板寫好，然后把模板和數據(數據可能來自后臺)整合到一起形成HTML代碼，最后把這段HTML代碼插入到文檔流里。
缺點：一旦HTML代碼生成就沒有辦法改變，如果有新數據重新傳入，就必須重新把模板和數據整合到一起插入到文檔流中。
1、拼接字符串
2、前端模板引擎

3、react實現

通過Virtual DOM 算法檢查DOM的變動的刷新機制。

二、數據雙向綁定原理
指數據模型和視圖之間的雙向綁定，用戶在視圖上的修改會自動同步到數據模型中，同樣的，如果數據模型中的值發生變化，也會同步到視圖中去。
優點：無需進行類似單向數據綁定的操作。
缺點：應用場景有限，最常用的場景是表單。
1、js原生實現
手動綁定。

2、vue實現
結合訂閱者發布者設計模式(觀察者模式)，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
3、angular實現
手動綁定，在指定的事件觸發時(比如dom事件，xhr響應事件，瀏覽器定位變更事件，定時器事件)，通過臟值檢測的方式循環監聽，比對數據是否有變更，來決定是否更新視圖。

轉載于:https://www.cnblogs.com/camille666/p/twoway_databinding.html

總結

以上是生活随笔為你收集整理的数据绑定原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。