vue雙向綁定原理

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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。