vue采用的是數據劫持結合發(fā)布訂閱者模式來實現雙向綁定,通過Object.defineProperty,通過遞歸深度遍歷數據并劫持了數據的getter跟setter,在數據發(fā)生變化時發(fā)布消息給訂閱者,觸發(fā)相應的監(jiān)聽回調。
1、第一步,js對象傳遞給vue作為數據屬性時,通過遞歸的方式給對象的每個值都添加上了getter跟setter,當給對象賦值時,就會觸發(fā)setter,監(jiān)聽到數據的變化。
2、當數據綁定到dom對象上時,訂閱者是作為watcher觀察者和complier編譯器之間的橋梁,在劫持data的時候,會將watcher添加到數據上邊去,這個watcher自身有一個update方法,這個方法會在數據更新時,由于訂閱器的dep.notice()方法做了通知而執(zhí)行試圖的更新操作。
vue雙向綁定.jpeg