一、數據單向綁定原理
指先把模板寫好,然后把模板和數據(數據可能來自后臺)整合到一起形成HTML代碼,最后把這段HTML代碼插入到文檔流里。
缺點:一旦HTML代碼生成就沒有辦法改變,如果有新數據重新傳入,就必須重新把模板和數據整合到一起插入到文檔流中。
1、拼接字符串
2、前端模板引擎
3、react實現
通過Virtual DOM 算法檢查DOM的變動的刷新機制。
二、數據雙向綁定原理
指數據模型和視圖之間的雙向綁定,用戶在視圖上的修改會自動同步到數據模型中,同樣的,如果數據模型中的值發生變化,也會同步到視圖中去。
優點:無需進行類似單向數據綁定的操作。
缺點:應用場景有限,最常用的場景是表單。
1、js原生實現
手動綁定。
2、vue實現
結合訂閱者發布者設計模式(觀察者模式),通過Object.defineProperty()來劫持各個屬性的setter,getter,在數據變動時發布消息給訂閱者,觸發相應的監聽回調。
3、angular實現
手動綁定,在指定的事件觸發時(比如dom事件,xhr響應事件,瀏覽器定位變更事件,定時器事件),通過臟值檢測的方式循環監聽,比對數據是否有變更,來決定是否更新視圖。