理解vue資料驅動
vue是雙向資料繫結的框架,資料驅動是他的靈魂,他的實現原理眾所周知是Object.defineProperty方法實現的get、set重寫,但是這樣說太牽強外門了。本文將巨集觀介紹他的實現
- 使用vue
- 分析Object.defineProperty
- 簡單的原始碼解析
- 一切從頭開始
- 資料驅動部分-觀察者
- vue掛載到dom
- 簡述Watcher
- 從巨集觀角度看問題
- 通過案例進行分析
- vue資料驅動的前提
- 看到的未必真實的
- 看到的未必真實2
- 注意事項
- 附加討論
使用vue
舉個非常簡單的栗子
# html <div id="#app"> {{msg}} </div> # script <script> new Vue({ el: '#app', data: { msg: 'hello' }, mounted() { setTimeout(() => { this.msg = 'hi' }, 1000); } }) </script>
上面程式碼, new Vue進行建立vue物件, el屬性是掛載的dom選擇器,這裡選擇id為app的dom,data物件儲存這所有資料響應的屬性,當其中的某一屬性值改變,就觸發view渲染,從而實現了“資料->檢視”的動態響應;
示例中msg初始值為hello,因此頁面渲染時為hello,一秒之後,msg變為了hi,觸發了view渲染,我們看到hello變為了li。那麼接下來就從這簡單的栗子來講解vue的資料驅動把。
分析Object.defineProperty
我們說vue是怎麼實現雙向資料繫結的?是Object.defineProperty實現了,那麼我們就直接聚焦Object.defineProperty
以下是程式碼
function defineReactive ( obj, key, val, customSetter, shallow ) { // 建立派發器 var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(obj, key); if (property && property.configurable === false) { return } // cater for pre-defined getter/setters var getter = property && property.get; var setter = property && property.set; if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } var childOb = !shallow && observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val; // 收集依賴物件 if (Dep.target) { dep.depend(); if (childOb) { childOb.dep.depend(); if (Array.isArray(value)) { dependArray(value); } } } return value }, set: function reactiveSetter (newVal) { var value = getter ? getter.call(obj) : val; /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if ("development" !== 'production' && customSetter) { customSetter(); } if (setter) { setter.call(obj, newVal); } else { val = newVal; } childOb = !shallow && observe(newVal); dep.notify(); } }); }
vue在給每一個data的屬性執行defineReactive函式,來達到資料繫結的目的。從程式碼中可以看到幾點:
- 每一個數據繫結,都會new一個Dep(暫且叫他派發器),派發器的功能是什麼?依賴收集以事件分發;
- 在屬性get中,除了獲取當前屬性的值,還做了
dep.depend()
操作; - dep.depend的目的是什麼?看Dep部分程式碼,很簡單,其實就是依賴收集,將Dep.target需要收集的依賴進行新增到自己的派發器裡
- 在屬性set時,就是給屬性改變值時,除了改變值意外,還執行了
dep.notify()
操作; - dep.notify的目的又是什麼?看程式碼,依舊很簡單,將自己派發器的所有依賴觸發update函式;
這一部分很容易瞭解,在data的屬性get時,觸發了派發器的依賴收集(dep.depend),在data的屬性set時,觸發了派發器的事件通知(dep.notify);
結合已知知識,Vue的資料繫結是上面這個函式帶來的副作用,因此可以得出結論:
- 當我們改變某個屬性值時,派發器Dep通知了view層去更新
- Dep.target是派發器Dep收集的依賴,並在屬性值改變時觸發了update函式,view層的更新與Dep.target有必然的聯絡。換句話說:資料->檢視的資料驅動就等於Dep.target.update()
簡單的原始碼解析
上一節已經確定,當更改屬性值時,是Dep.target.update更新了view,因此帶著這個目的,此小節做一個簡單的原始碼解析
一切從頭開始
function Vue (options) {
this._init(options);
}
Vue.prototype._init = function (options) {
var vm = this;
callHook(vm, 'beforeCreate');
initState(vm);
callHook(vm, 'created');
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};
function initState (vm) {
vm._watchers = [];
var opts = vm.$options;
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */);
}
}
function initData (vm) {
var data = vm.$options.data;
observe(data, true /* asRootData */);
}
function observe (value, asRootData) {
if (!isObject(value) || value instanceof VNode) {
return
}
var ob = new Observer(value);;
return ob
}
從頭開始,一步一步進入,發現最終我們new Vue傳進來的data進入了new Observer中;
資料驅動部分-觀察者
var Observer = function Observer (value) {
this.value = value;
this.dep = new Dep();
this.vmCount = 0;
def(value, '__ob__', this);
if (Array.isArray(value)) {
var augment = hasProto
? protoAugment
: copyAugment;
augment(value, arrayMethods, arrayKeys);
this.observeArray(value);
} else {
this.walk(value);
}
};
Observer.prototype.walk = function walk (obj) {
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]);
}
};
Observer建構函式中,最終執行了defineReactive為每一個屬性進行定義,並且是遞迴呼叫,以樹型遍歷我們傳入的data物件的所有節點屬性,每一個節點都會被包裝為一個觀察者,當資料get時,進行依賴收集,當資料set時,事件分發。
看到這裡,感覺好像少了點什麼,好像data到這裡就結束了,但是並沒有看懂為什麼資料改變更新檢視的,那麼繼續往下看
vue掛載到dom
回看一切從頭開始的_init方法,在這個方法中,最後呼叫了vm.$mount(vm.$options.el)
,這是把vm掛載到真實dom,並渲染view的地方,因此接著看下去。
Vue.prototype.$mount = function (
el,
hydrating
) {
return mountComponent(this, el, hydrating)
};
// 渲染dom的真實函式
function mountComponent (
vm,
el,
hydrating
) {
vm.$el = el;
callHook(vm, 'beforeMount');
var updateComponent;
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
// new 一個Watcher,開啟了資料驅動之旅
new Watcher(vm, updateComponent, noop, {
before: function before () {
if (vm._isMounted) {
callHook(vm, 'beforeUpdate');
}
}
}, true /* isRenderWatcher */);
hydrating = false;
if (vm.$vnode == null) {
vm._isMounted = true;
callHook(vm, 'mounted');
}
return vm
}
上面部分看到的是,vue將vue物件掛載到真實dom的經歷,最終執行了new Watcher,並且回撥為vm._update(vm._render(), hydrating)
。顧名思義,這裡是執行了vue的更新view的操作(本文暫且不講更新view,在其他文章已經講過。本文專注資料驅動部分)。
問:為什麼說new Watcher開啟了資料驅動之旅呢?Watcher又是什麼功能?
簡述Watcher
如果說Object.defineProperty是vue資料驅動的靈魂,那麼Watcher則是他的骨骼。
// 超級簡單的Watcher
var Watcher = function Watcher (
vm,
expOrFn,
cb,
options,
isRenderWatcher
) {
this.cb = cb;
this.deps = [];
this.newDeps = [];
// 計算屬性走if
if (this.computed) {
this.value = undefined;
this.dep = new Dep();
} else {
this.value = this.get();
}
};
Watcher.prototype.get = function get () {
pushTarget(this);
var value;
var vm = this.vm;
try {
value = this.getter.call(vm, vm);
} catch (e) {
if (this.user) {
handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
} else {
throw e
}
} finally {
popTarget();
this.cleanupDeps();
}
return value
};
簡化後Watcher在new時,最終會呼叫自己的get方法,get方法中第一個語句pushTarget(this)
是開啟資料驅動的第一把鑰匙,看下文
function pushTarget (_target) {
if (Dep.target) { targetStack.push(Dep.target); }
Dep.target = _target;
}
pushTarget將傳入的Watcher物件賦值給了Dep.target,還記得在講Object.defineProperty時提到了,Dep.target.update是更新view的觸發點,在這裡終於找到了!
下面看Dep.targe.update
Watcher.prototype.update = function update () {
var this$1 = this;
/* istanbul ignore else */
if (this.computed) {
if (this.dep.subs.length === 0) {
this.dirty = true;
} else {
this.getAndInvoke(function () {
this$1.dep.notify();
});
}
} else if (this.sync) {
this.run();
} else {
// update執行了這裡
queueWatcher(this);
}
};
我們看到update方法最後執行了queueWatcher,繼續看下去發現,這其實是一個更新佇列,vue對同一個微任務的所有update進行了收集更新,最終執行了watcher.run,run方法又執行了getAndInvoke
方法,getAndInvoke又執行了this.get
方法。
到來一大圈,終於找到:在改變屬性值時,觸發了Dep.target所對應的Watcher的 this.get
方法,this.get方法其實就是傳入進來的回撥函式。回想前面介紹的,vue在掛載到真實dom時,new Watcher傳入的回撥是updateComponent。串聯起來得到了結論:
- 我們在get屬性時,Dep派發器收集到了Watcher當作依賴
- 當我們set屬性時,Dep派發器事件分發,使所有收集到的依賴執行
this.get
,這時候view會更新。
到這裡,有沒有明白為什麼所有屬性的派發器都會收集updateComponent的Watcher,從而在自己set時通知更新?如果沒明白,那就看下一節分析
從巨集觀角度看問題
- 當我們new Vue時,首先會將傳入的data將被vue包裝為觀察者,所有get和set行為都會捕捉到並執行響應的操作
- 接下來vue會將vue物件掛載到真實dom(其實指的虛擬的渲染),這個時候new 一個Watcher, 在new Watcher時,會執行一次
this.get
初始化一次值,對標updateComponent函式,這個時候會觸發vue渲染過程 - 在vue渲染過程中,所有的資料都需要進行get行為才能得到值並給真實dom賦值,因此這時觸發了所有data屬性的get,並且此時Dep.target是updateComponent的Watcher,因此所有的data屬性派發器都收集到了此Watcher,在set時,派發器notify進行事件分發,收集到的依賴Watcher都得到了通知進行update,所有又會執行updateCompoent進行更新view
通過案例進行分析
vue資料驅動的前提
vue資料驅動是有前提條件的,不是怎麼用都可以的,前提條件就是必須在data中宣告的屬性才會參與資料驅動,資料->檢視。看下面栗子
有如下html:
<div id="app">
<div>{{prev}}{{next}}</div>
</div>
如下js:
new Vue({
el: "#app",
data: {
prev: 'hello',
},
created() {
},
mounted() {
this.next = 'world';
}
})
頁面渲染的結果是什呢?
答:hello;
為什麼this.next明明賦值,沒有渲染到view中去?因為他並沒有參與資料驅動的觀察者,還記得前面講到vue會把傳入的data物件深度遍歷包裝為觀察者來吧,這裡next屬性並沒有被成為觀察者,因此並不會引發view更新。
看到的未必真實的
為什麼看到的未必真實的,上面的栗子我們發現,view中看到的只有hello,但是資料真的是有hello麼?未必,看下面栗子。
new Vue({
el: "#app",
data: {
prev: 'hello',
},
created() {
},
mounted() {
this.next = 'world';
setTimeout(() => {
this.prev = 'hi';
}, 1000);
}
})
這個程式碼比上面栗子就多了3行程式碼,再頁面渲染1秒後,改變prev的值為hi,那麼頁面會展現什麼效果呢?
答:hi world
從這裡可以看到,雖然next賦值並沒有引起view更新,但是data確實成功變更了,當prev改變時,觸發了update,從而將view更新,此時next有值,因此就顯示在了view中。這就是很多初學者會遇到為什麼明明賦值沒有顯示,但是點了一下其他的東西,卻顯示了的問題。
看到的未必真實2
還是根據第一個栗子引申一個案例如下:
new Vue({
el: "#app",
data: {
prev: 'hello',
},
created() {
this.next = 'world';
},
mounted() {
setTimeout(() => {
this.next = 'memory'
}, 1000)
}
})
我們在created生命週期中賦值next,在mounted生命週期延遲一秒改變next的值,那結果會這樣?
答:永遠顯示helloworld
如果已經掌握了vue例項化過程的同學可能已經猜到了為什麼
當created生命週期執行時,此時還沒有做vnode轉化為真實dom的操作,此時data屬性已經代理到this下,因此修改this.next就修改了data物件的值,data就變為了{prev: 'hello', next: 'world'}
,因此在render時就將next也渲染到了頁面上
另外此時已經完成了資料驅動的靈魂步驟(將data遍歷包裝為觀察者),因此在延遲1s後改變next值,仍然跟栗子2一樣不會引起view更新的。
因此,寫vue出現以上改變data時view未更新,首先要檢查自己的程式碼,而不是懷疑vue框架的問題。。
注意事項
- 本文參考vue版本v2.5.17-beta.0
- 本文專注資料驅動主線data,computed等支線並沒有介紹,因此貼的程式碼都做了大量刪減
- data屬性收集到的依賴Dep.target並不止updateComponent的Watcher,還可能多個,比如computed屬性
附加討論
有些面試官會問在非同步獲取資料並改變data值時,放在created還是mounted?
我感覺沒什麼可答的,2個都沒問題,當然對於程式碼優化,放在created更早的發出請求,因此放在created裡更合適