MVVM 響應式原理(Vue)

2022-09-15 16:57:10 字數 833 閱讀 9795

雙向繫結簡單來說就是資料可以驅動檢視,檢視也可以影響資料。

檢視修改資料無非就是通過監聽可輸入元素的變化,動態修改viewmodal

常用的有三種方式

sub、pub 方式實現資料和試圖的繫結監聽,vm.set(property, value)方式更新資料

最簡單實現方式定時器輪詢是否發生變化

在指定事件觸發時,檢測新舊值是否相同,如果不同則更新

觸發事件比如

通過object.defineproperty()劫持各屬性的settergetter,發生變化時發布訊息給訂閱者,觸發**

vue 採用資料劫持結合發布者-訂閱者模式的方式通過 object.defineproperty() 劫持並監聽各個屬性的 setter 和 getter,在資料變動時,發布訊息給依賴收集器,通知觀察者,呼叫相應的**函式,進而更新檢視

mvvm 作為入口函式,整合 observer、compile、watcher 三者,通過 observer 監聽資料變化,通過 compile 解析編譯模版指令,通過 watcher 連線 observer 和 compile ,達到資料更新時檢視更新,檢視互動更新時資料更新的雙向繫結效果

訂閱器(dep):通知訂閱者更新檢視,存放多個訂閱器

訂閱者(watcher):更新檢視

observer:劫持屬性

compile:解析指令

vue響應式布局 Vue 響應式原理

vue2 的資料偵測 在 src observer 目錄裡面,元件例項在初始化時,會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法,從而讓 data 變成可響應...

vue響應式原理

響應式系統是vue框架核心的部分,資料物件僅僅是普通的 js物件。當我們改變資料時,檢視也會被改變,本文就來 一下vue 的響應式原理。vue響應式的核心是使用了es5 新增的api object.defineproperty 因此vue不支援ie8 object.defineproperty的作用...

vue響應式原理

要了解響應式原理首先應該知道什麼是響應式 更改 vue的響應式原理是什麼 vue資料的雙向繫結是通過資料劫持結合發布訂閱模式,偵測到資料變化,然後通過object.defineproperty 物件對每個屬性的getter和setter進行劫持。當讀取 data 中的資料時自動呼叫 get 方法,當...