vue雙向繫結原理

2022-02-26 07:43:00 字數 722 閱讀 6240

採用 資料劫持 + 發布-訂閱 模式,通過object.definepropety()來劫持各個屬性的setter,getter,在資料變動時發布訊息給訂閱者,觸發相應的監聽**

需要對observer的資料物件進行遞迴遍歷,包括子屬性物件的屬性,都加上setter和getter ,這樣,給這個物件的某個值賦值,就會觸發setter,這樣就能監聽到資料的變化

complie解析模版指令,將模版中的變數替換成資料,然後初始化渲染頁面檢視,並將每個指令對應的節點繫結更新函式,新增監聽資料的訂閱者,一旦資料有變動就會收到通知,更新檢視

watcher訂閱者是observer和compile之間通訊的橋梁

在自身例項化往屬性訂閱器dep裡新增自己

自身必須有乙個update()方法

等屬性變動dep.notice()通知時,能呼叫自身的update方法,並觸發compile中繫結的**

mvvm作為資料繫結的入口,整合observer,compile,watcher三者,通過observer來監聽自己的model資料變化,通過compile來解析編譯模版指令,最後利用watcher搭起練習observer和compile聯絡的橋梁,達到資料變化--->試圖更新,檢視有互動變化---->資料model變更的雙向繫結效果

如果本文對您有幫助,請抬抬您的小手,點下右下角的推薦, ^-^,當然如果看了這篇部落格對您有幫助是我最開心的事,畢竟贈人玫瑰,手有餘香, ^-^,如果這篇部落格沒有幫助到您,那就只能說一聲抱歉啦

vue雙向繫結原理

大家知道vue的雙向繫結原理是利用object.defineproperty 這一方法,以下是我研究該方法的一些內容 語法 object.defineproperty obj,prop,descriptor descriptor是將被定義或修改的屬性描述符,而雙向繫結是利用get和set屬性描述符。...

Vue雙向繫結原理

vue實現資料雙向繫結的原理就是用object.defineproperty 重新定義 set方法 物件設定屬性值和 get方法 獲取屬性值的操縱來實現的 object.property 方法的解釋 object.property 引數1,引數2,引數3 返回值為該物件obj 其中引數1為該物件 o...

vue雙向繫結原理

vue資料雙向繫結是通過資料劫持結合發布者 訂閱者模式來實現的。首先要對資料進行劫持監聽,所以需要設定乙個 observer,用來監聽所有的屬性。如果屬性發生了變化,就要告訴訂閱者watcher看是否需要更新,因為訂閱者很多,所以我們需要有乙個訊息訂閱器容器dep專門收集訂閱者,然後在 observ...