|
vue是雙向數(shù)據(jù)綁定的框架,，數(shù)據(jù)驅(qū)動(dòng)是他的靈魂，他的實(shí)現(xiàn)原理眾所周知是Object.defineProperty方法實(shí)現(xiàn)的get,、set重寫,，但是這樣說太牽強(qiáng)外門了。本文將宏觀介紹他的實(shí)現(xiàn)
使用vue
舉個(gè)非常簡單的栗子
# html
<div id="#app">
{{msg}}
</div>
# script
<script>
new Vue({
el: '#app',
data: {
msg: 'hello'
},
mounted() {
setTimeout(() => {
this.msg = 'hi'
}, 1000);
}
})
</script>
上面代碼,， new Vue進(jìn)行創(chuàng)建vue對象,， el屬性是掛載的dom選擇器，這里選擇id為app的dom,，data對象保存這所有數(shù)據(jù)響應(yīng)的屬性,，當(dāng)其中的某一屬性值改變，就觸發(fā)view渲染,，從而實(shí)現(xiàn)了“數(shù)據(jù)->視圖”的動(dòng)態(tài)響應(yīng),；
示例中msg初始值為hello，因此頁面渲染時(shí)為hello,，一秒之后,，msg變?yōu)榱薶i，觸發(fā)了view渲染,，我們看到hello變?yōu)榱薼i,。那么接下來就從這簡單的栗子來講解vue的數(shù)據(jù)驅(qū)動(dòng)把。
分析Object.defineProperty
我們說vue是怎么實(shí)現(xiàn)雙向數(shù)據(jù)綁定的,？是Object.defineProperty實(shí)現(xiàn)了,，那么我們就直接聚焦Object.defineProperty
以下是代碼
function defineReactive (
obj,
key,
val,
customSetter,
shallow
) {
// 創(chuàng)建派發(fā)器
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在給每一個(gè)data的屬性執(zhí)行defineReactive函數(shù)，來達(dá)到數(shù)據(jù)綁定的目的,。從代碼中可以看到幾點(diǎn)：
- 每一個(gè)數(shù)據(jù)綁定,，都會(huì)new一個(gè)Dep（暫且叫他派發(fā)器），派發(fā)器的功能是什么,？依賴收集以事件分發(fā),；
- 在屬性get中，除了獲取當(dāng)前屬性的值,，還做了
dep.depend()操作,；
- dep.depend的目的是什么？看Dep部分代碼,，很簡單,，其實(shí)就是依賴收集，將Dep.target需要收集的依賴進(jìn)行添加到自己的派發(fā)器里
- 在屬性set時(shí)，就是給屬性改變值時(shí),，除了改變值意外,，還執(zhí)行了
dep.notify()操作；
- dep.notify的目的又是什么,？看代碼,，依舊很簡單，將自己派發(fā)器的所有依賴觸發(fā)update函數(shù),；
這一部分很容易了解,，在data的屬性get時(shí)，觸發(fā)了派發(fā)器的依賴收集(dep.depend),，在data的屬性set時(shí),，觸發(fā)了派發(fā)器的事件通知(dep.notify)；
結(jié)合已知知識,，Vue的數(shù)據(jù)綁定是上面這個(gè)函數(shù)帶來的副作用,，因此可以得出結(jié)論：
- 當(dāng)我們改變某個(gè)屬性值時(shí)，派發(fā)器Dep通知了view層去更新
- Dep.target是派發(fā)器Dep收集的依賴,，并在屬性值改變時(shí)觸發(fā)了update函數(shù),，view層的更新與Dep.target有必然的聯(lián)系。換句話說：數(shù)據(jù)->視圖的數(shù)據(jù)驅(qū)動(dòng)就等于Dep.target.update()
簡單的源碼解析
上一節(jié)已經(jīng)確定,，當(dāng)更改屬性值時(shí),，是Dep.target.update更新了view，因此帶著這個(gè)目的,，此小節(jié)做一個(gè)簡單的源碼解析
一切從頭開始
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
}
從頭開始,，一步一步進(jìn)入，發(fā)現(xiàn)最終我們new Vue傳進(jìn)來的data進(jìn)入了new Observer中,；
數(shù)據(jù)驅(qū)動(dòng)部分-觀察者
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構(gòu)造函數(shù)中,，最終執(zhí)行了defineReactive為每一個(gè)屬性進(jìn)行定義，并且是遞歸調(diào)用,，以樹型遍歷我們傳入的data對象的所有節(jié)點(diǎn)屬性,，每一個(gè)節(jié)點(diǎn)都會(huì)被包裝為一個(gè)觀察者，當(dāng)數(shù)據(jù)get時(shí),，進(jìn)行依賴收集,，當(dāng)數(shù)據(jù)set時(shí)，事件分發(fā),。
看到這里,，感覺好像少了點(diǎn)什么,，好像data到這里就結(jié)束了,，但是并沒有看懂為什么數(shù)據(jù)改變更新視圖的，那么繼續(xù)往下看
vue掛載到dom
回看一切從頭開始的_init方法，在這個(gè)方法中,，最后調(diào)用了 vm.$mount(vm.$options.el),，這是把vm掛載到真實(shí)dom，并渲染view的地方,，因此接著看下去,。
Vue.prototype.$mount = function (
el,
hydrating
) {
return mountComponent(this, el, hydrating)
};
// 渲染dom的真實(shí)函數(shù)
function mountComponent (
vm,
el,
hydrating
) {
vm.$el = el;
callHook(vm, 'beforeMount');
var updateComponent;
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
// new 一個(gè)Watcher，開啟了數(shù)據(jù)驅(qū)動(dòng)之旅
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對象掛載到真實(shí)dom的經(jīng)歷,，最終執(zhí)行了new Watcher，并且回調(diào)為vm._update(vm._render(), hydrating),。顧名思義,，這里是執(zhí)行了vue的更新view的操作（本文暫且不講更新view，在其他文章已經(jīng)講過,。本文專注數(shù)據(jù)驅(qū)動(dòng)部分）,。
問：為什么說new Watcher開啟了數(shù)據(jù)驅(qū)動(dòng)之旅呢？Watcher又是什么功能,？
簡述Watcher
如果說Object.defineProperty是vue數(shù)據(jù)驅(qū)動(dòng)的靈魂,，那么Watcher則是他的骨骼。
// 超級簡單的Watcher
var Watcher = function Watcher (
vm,
expOrFn,
cb,
options,
isRenderWatcher
) {
this.cb = cb;
this.deps = [];
this.newDeps = [];
// 計(jì)算屬性走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時(shí),，最終會(huì)調(diào)用自己的get方法,，get方法中第一個(gè)語句pushTarget(this)是開啟數(shù)據(jù)驅(qū)動(dòng)的第一把鑰匙，看下文
function pushTarget (_target) {
if (Dep.target) { targetStack.push(Dep.target); }
Dep.target = _target;
}
pushTarget將傳入的Watcher對象賦值給了Dep.target,，還記得在講Object.defineProperty時(shí)提到了,，Dep.target.update是更新view的觸發(fā)點(diǎn)，在這里終于找到了,！
下面看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執(zhí)行了這里
queueWatcher(this);
}
};
我們看到update方法最后執(zhí)行了queueWatcher,，繼續(xù)看下去發(fā)現(xiàn)，這其實(shí)是一個(gè)更新隊(duì)列,，vue對同一個(gè)微任務(wù)的所有update進(jìn)行了收集更新,，最終執(zhí)行了watcher.run，run方法又執(zhí)行了getAndInvoke方法,，getAndInvoke又執(zhí)行了this.get方法,。
到來一大圈，終于找到：在改變屬性值時(shí),，觸發(fā)了Dep.target所對應(yīng)的Watcher的 this.get方法,，this.get方法其實(shí)就是傳入進(jìn)來的回調(diào)函數(shù)?；叵肭懊娼榻B的,，vue在掛載到真實(shí)dom時(shí),，new Watcher傳入的回調(diào)是updateComponent。串聯(lián)起來得到了結(jié)論：
- 我們在get屬性時(shí),，Dep派發(fā)器收集到了Watcher當(dāng)作依賴
- 當(dāng)我們set屬性時(shí),，Dep派發(fā)器事件分發(fā)，使所有收集到的依賴執(zhí)行
this.get,，這時(shí)候view會(huì)更新,。
到這里，有沒有明白為什么所有屬性的派發(fā)器都會(huì)收集updateComponent的Watcher,，從而在自己set時(shí)通知更新,？如果沒明白，那就看下一節(jié)分析
從宏觀角度看問題
- 當(dāng)我們new Vue時(shí),，首先會(huì)將傳入的data將被vue包裝為觀察者,，所有g(shù)et和set行為都會(huì)捕捉到并執(zhí)行響應(yīng)的操作
- 接下來vue會(huì)將vue對象掛載到真實(shí)dom（其實(shí)指的虛擬的渲染），這個(gè)時(shí)候new 一個(gè)Watcher,， 在new Watcher時(shí),，會(huì)執(zhí)行一次
this.get初始化一次值，對標(biāo)updateComponent函數(shù),，這個(gè)時(shí)候會(huì)觸發(fā)vue渲染過程
- 在vue渲染過程中,，所有的數(shù)據(jù)都需要進(jìn)行g(shù)et行為才能得到值并給真實(shí)dom賦值，因此這時(shí)觸發(fā)了所有data屬性的get,，并且此時(shí)Dep.target是updateComponent的Watcher,，因此所有的data屬性派發(fā)器都收集到了此Watcher，在set時(shí),，派發(fā)器notify進(jìn)行事件分發(fā),，收集到的依賴Watcher都得到了通知進(jìn)行update，所有又會(huì)執(zhí)行updateCompoent進(jìn)行更新view
通過案例進(jìn)行分析
vue數(shù)據(jù)驅(qū)動(dòng)的前提
vue數(shù)據(jù)驅(qū)動(dòng)是有前提條件的,，不是怎么用都可以的,，前提條件就是必須在data中聲明的屬性才會(huì)參與數(shù)據(jù)驅(qū)動(dòng)，數(shù)據(jù)->視圖,?？聪旅胬踝?/p>
有如下html：
<div id="app">
<div>{{prev}}{{next}}</div>
</div>
如下js：
new Vue({
el: "#app",
data: {
prev: 'hello',
},
created() {
},
mounted() {
this.next = 'world';
}
})
頁面渲染的結(jié)果是什呢？
答：hello,；
為什么this.next明明賦值,，沒有渲染到view中去？因?yàn)樗]有參與數(shù)據(jù)驅(qū)動(dòng)的觀察者,，還記得前面講到vue會(huì)把傳入的data對象深度遍歷包裝為觀察者來吧,，這里next屬性并沒有被成為觀察者，因此并不會(huì)引發(fā)view更新,。
看到的未必真實(shí)的
為什么看到的未必真實(shí)的,，上面的栗子我們發(fā)現(xiàn),，view中看到的只有hello，但是數(shù)據(jù)真的是有hello么,？未必,，看下面栗子,。
new Vue({
el: "#app",
data: {
prev: 'hello',
},
created() {
},
mounted() {
this.next = 'world';
setTimeout(() => {
this.prev = 'hi';
}, 1000);
}
})
這個(gè)代碼比上面栗子就多了3行代碼,，再頁面渲染1秒后，改變prev的值為hi,，那么頁面會(huì)展現(xiàn)什么效果呢,？
答：hi world
從這里可以看到，雖然next賦值并沒有引起view更新,，但是data確實(shí)成功變更了,，當(dāng)prev改變時(shí)，觸發(fā)了update,，從而將view更新,，此時(shí)next有值，因此就顯示在了view中,。這就是很多初學(xué)者會(huì)遇到為什么明明賦值沒有顯示,，但是點(diǎn)了一下其他的東西，卻顯示了的問題,。
看到的未必真實(shí)2
還是根據(jù)第一個(gè)栗子引申一個(gè)案例如下：
new Vue({
el: "#app",
data: {
prev: 'hello',
},
created() {
this.next = 'world';
},
mounted() {
setTimeout(() => {
this.next = 'memory'
}, 1000)
}
})
我們在created生命周期中賦值next,，在mounted生命周期延遲一秒改變next的值，那結(jié)果會(huì)這樣,？
答：永遠(yuǎn)顯示helloworld
如果已經(jīng)掌握了vue實(shí)例化過程的同學(xué)可能已經(jīng)猜到了為什么
當(dāng)created生命周期執(zhí)行時(shí),，此時(shí)還沒有做vnode轉(zhuǎn)化為真實(shí)dom的操作，此時(shí)data屬性已經(jīng)代理到this下,，因此修改this.next就修改了data對象的值,，data就變?yōu)榱?code>{prev: 'hello', next: 'world'},因此在render時(shí)就將next也渲染到了頁面上
另外此時(shí)已經(jīng)完成了數(shù)據(jù)驅(qū)動(dòng)的靈魂步驟（將data遍歷包裝為觀察者），因此在延遲1s后改變next值,，仍然跟栗子2一樣不會(huì)引起view更新的,。
因此，寫vue出現(xiàn)以上改變data時(shí)view未更新,，首先要檢查自己的代碼,，而不是懷疑vue框架的問題。,。
注意事項(xiàng)
- 本文參考vue版本v2.5.17-beta.0
- 本文專注數(shù)據(jù)驅(qū)動(dòng)主線data,，computed等支線并沒有介紹，因此貼的代碼都做了大量刪減
- data屬性收集到的依賴Dep.target并不止updateComponent的Watcher,，還可能多個(gè),，比如computed屬性
附加討論
有些面試官會(huì)問在異步獲取數(shù)據(jù)并改變data值時(shí),，放在created還是mounted？
我感覺沒什么可答的,，2個(gè)都沒問題,，當(dāng)然對于代碼優(yōu)化，放在created更早的發(fā)出請求,，因此放在created里更合適,。
|
