vue的響應式是如何實現的?
watcher ----- dep ---- walk + defineproperty
1 vue 初始化 -- 進行資料的set、get繫結,並建立了乙個dep物件
// src > core > observer > index.js// 執行 new vue 時會依次執行以下方法
//1. vue.prototype._init(option)
//2. initstate(vm)
//3. observe(vm._data)
//4. new observer(data)
//5. 呼叫 walk 方法,遍歷 data 中的每乙個屬性,監聽資料的變化。
// 遍歷所有屬性並將它們轉換為getter/setter。此方法僅在值型別為object時呼叫。
function walk(obj: object) }//
6. 執行 defineproperty 監聽資料讀取和設定。
// 定義物件上的響應式屬性
dep物件是什麼?
1.2 dep物件 -- 用於依賴收集,它實現了乙個發布訂閱模式,完成了資料data和渲染檢視 watcher 的訂閱
watch的功能是什麼?
watcher 是什麼時候建立的?
2 模板渲染
2.1 new vue 執行流程
//src > core > instance > lifecycle.js
// 1. vue.prototype._init(option)
//2. vm.$mount(vm.$options.el)
//3. render = compiletofunctions(template) ,編譯 vue 中的 template 模板,生成 render 方法。
//4. vue.prototype.$mount 呼叫上面的 render 方法掛載 dom。
//5. mountcomponent
//6. 建立 watcher 例項
const updatecomponent = () =>;
//結合上文,我們就能得出,updatecomponent 就是傳入 watcher 內部的 getter 方法。
newwatcher(vm, updatecomponent);
//7. new watcher 會執行 watcher.get 方法
//8. watcher.get 會執行 this.getter.call(vm, vm) ,也就是執行 updatecomponent 方法
//9. updatecomponent 會執行 vm._update(vm._render())
//10. 呼叫 vm._render 生成虛擬 dom
vue.prototype._render = function
(): vnode =vm.$options;
let vnode =render.call(vm._renderproxy, vm.$createelement);
return
vnode;
};//
11. 呼叫 vm._update(vnode) 渲染虛擬 dom
vue.prototype._update = function
(vnode: vnode)
else
};//
12. vm.__patch__ 方法就是做的 dom diff 比較,然後更新 dom,這裡就不展開了。
watcher 是在 vue 初始化的階段建立的,屬於生命週期中 beforemount 的位置建立的,建立 watcher 時會執行 render 方法,最終將 vue **渲染成真實的 dom。
vue初始化到渲染dom的過程:
當資料發生改變時,vue是怎樣進行更新的?
總結:vue的響應式原理
從 new vue 開始,首先通過 get、set 監聽 data 中的資料變化,同時建立 dep 用來蒐集使用該 data 的 watcher。
編譯模板,建立 watcher,並將 dep.target 標識為當前 watcher。
編譯模板時,如果使用到了 data 中的資料,就會觸發 data 的 get 方法,然後呼叫 dep.addsub 將 watcher 蒐集起來。
資料更新時,會觸發 data 的 set 方法,然後呼叫 dep.notify 通知所有使用到該 data 的 watcher 去更新 dom。
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 方法,當...