初學者可能都會有這麼乙個疑惑.「為什麼在data資料發生變化的時候,頁面會被重新渲染」. 這個問題的答案是vue內部會遍歷data裡面所有的屬性,並使用object.defineproperty
將這些屬性全部轉換為getter/setter
。將來vue內部可以通過object.defineproperty
追蹤依賴,當有data裡面的屬性發生改變時會觸發setter,我們可以在裡面做響應式操作(例如:資料發生改變通知元件進行更新).
class myvue
} observe (obj)
//2. 遍歷該物件. 因為data裡面可以存放很多個屬性.
object.keys (obj).foreach (key => );
} definereactive (obj, key, value) ,
set (newval)
value = newval;
console.log (`$屬性更新了,更新的值為$`);
},});
}}
使用
效果演示:
開啟html,在控制台視窗等待3秒將會提示name屬性更新了,更新的值為: 你好,vue
結合原始碼解析 vue響應式原理
vue響應式原理 在之前vue2.0中,vue的響應式原理主要是基於object.defineproperty進行資料劫持然後結合觀察者模式 發布訂閱模式 來實現資料的雙向繫結。function dep dep.prototype.notify function function sub x sub...
Vue 響應式原理 原始碼
整個函式結束,相當於初始化所有屬性和vue內建事件 如 emit 並且使所有屬性變為響應式。初始化所有option api 對其中的使用者自定義資料data 進行 observe 此函式用來新建乙個類observer的例項,類observer的constructor中用walk 函式進行遍歷每個屬性...
學習 vue 原始碼 響應式原理
由於剛開始學習 vue 原始碼,而且水平有限,有理解或表述的不對的地方,還請不吝指教。vue 主要通過 watcher dep 和 observer 三個類來實現響應式檢視。另外還有乙個 scheduler 來進行排程,本次暫時不做討論。watcher 和 dep 是訂閱者和發布者的關係,每個 wa...