前言
上一節着重講述了initData
中的代碼,以及數據是如何從data中到視圖層的,以及data修改後如何作用於視圖。這一節主要記錄initComputed
中的內容。
正文
前情回顧
在demo示例中,我們定義了一個計算屬性。
computed:{
total(){
return this.a + this.b
}
}
本章節我們繼續探究這個計算屬性的相關流程。
initComputed
// initComputed(vm, opts.computed)
function initComputed (vm: Component, computed: Object) {
// 定義計算屬性相關的watchers.
const watchers = vm._computedWatchers = Object.create(null)
// 是否是服務端渲染,這裏贊不考慮。
const isSSR = isServerRendering()
for (const key in computed) {
// 獲得用戶定義的計算屬性中的item,通常是一個方法
// 在示例程序中,僅有一個key爲total的計算a+b的方法。
const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef : userDef.get
if (process.env.NODE_ENV !== 'production' && getter == null) {
warn(
`Getter is missing for computed property "${key}".`,
vm
)
}
if (!isSSR) {
// create internal watcher for the computed property.
// 爲計算屬性創建一個內部的watcher。
// 其中computedWatcherOptions的值爲lazy,意味着這個wacther內部的value,先不用計算。
// 只有在需要的情況下才計算,這裏主要是在後期頁面渲染中,生成虛擬dom的時候纔會計算。
// 這時候new Watcher只是走一遍watcher的構造函數,其內部value由於
// lazy爲true,先設置爲了undefined.同時內部的dirty = lazy;
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions // 上文定義過,值爲{lazy: true}
)
}
// component-defined computed properties are already defined on the
// component prototype. We only need to define computed properties defined
// at instantiation here.
// 組件定義的屬性只是定義在了組件上,這裏只是把它翻譯到實例中。即當前的vm對象。
if (!(key in vm)) {
// 將計算屬性定義到實例中。
defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
}
}
}
defineComputed
const sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}
// defineComputed(vm, key, userDef)
export function defineComputed (
target: any,
key: string,
userDef: Object | Function
) {
// 是否需要緩存。即非服務端渲染需要緩存。
// 由於本案例用的demo非服務端渲染,這裏結果是true
const shouldCache = !isServerRendering()
if (typeof userDef === 'function') {
// userDef = total() {...}
sharedPropertyDefinition.get = shouldCache
// 根據key創建計算屬性的getter
? createComputedGetter(key)
: userDef
// 計算屬性是隻讀的,所以設置setter爲noop.
sharedPropertyDefinition.set = noop
} else {
sharedPropertyDefinition.get = userDef.get
? shouldCache && userDef.cache !== false
? createComputedGetter(key)
: userDef.get
: noop
sharedPropertyDefinition.set = userDef.set
? userDef.set
: noop
}
// 計算屬性是隻讀的,所以設置值得時候需要報錯提示
if (process.env.NODE_ENV !== 'production' &&
sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
`Computed property "${key}" was assigned to but it has no setter.`,
this
)
}
}
// 將組件屬性-》實例屬性,關鍵的一句,設置屬性描述符
Object.defineProperty(target, key, sharedPropertyDefinition)
}
createComputedGetter
// 根據key創建計算屬性的getter
// createComputedGetter(key)
function createComputedGetter (key) {
return function computedGetter () {
// 非服務端渲染的時候,在上述的initComputed中定義了vm._computedWatchers = {},並根據組件中的設定watchers[key] = new Watcher(..),這裏只是根據key取出了當時new的watcher
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
// watcher.dirty表示這個值是髒值,過期了。所以需要重新計算。
// new Watcher的時候,這個total的watcher中,內部的dirty已經被置爲
// dirty = lazy = true;
// 那麼這個值什麼時候會過期,會髒呢。就是內部的依賴更新時候,
// 比如我們的total依賴於this.a,this.b,當着兩個值任意一個變化時候
// 我們的total就已經髒了。需要根據最新的a,b計算。
if (watcher.dirty) {
// 計算watcher中的值,即value屬性.
watcher.evaluate()
}
// 將依賴添加到watcher中。
if (Dep.target) {
watcher.depend()
}
// getter的結果就是返回getter中的值。
return watcher.value
}
}
}
initComputed小結
繼initComputed之後,所有組件中的computed都被賦值到了vm實例的屬性上,並設置好了getter和setter。在非服務端渲染的情況下,getter會緩存計算結果。並在需要的時候,才計算。setter則是一個什麼都不做的函數,預示着計算屬性只能被get,不能被set。即只讀的。
接下來的問題就是:
- 這個計算屬性什麼時候會計算,前文
{lazy:true}
預示着當時new Watcher得到的值是undefined。還沒開始計算。 - 計算屬性是怎麼知道它本身依賴於哪些屬性的。以便知道其什麼時候更新。
- vue官方文檔的緩存計算結果怎麼理解。
接下來我們繼續剖析後面的代碼。
用來生成vnode的render函數
下次再見到這個計算屬性total的時候,已是在根據el選項或者template模板中,生成的render函數,render函數上一小節也提到過。長這個樣子。
(function anonymous() {
with (this) {
return _c('div', {
attrs: {
"id": "demo"
}
}, [_c('div', [_c('p', [_v("a:" + _s(a))]), _v(" "), _c('p', [_v("b: " + _s(b))]), _v(" "), _c('p', [_v("a+b: " + _s(total))]), _v(" "), _c('button', {
on: {
"click": addA
}
}, [_v("a+1")])])])
}
}
)
這裏可以結合一下我們的html,看出一些特點。
<div id="demo">
<div>
<p>a:{{a}}</p>
<p>b: {{b}}</p>
<p>a+b: {{total}}</p>
<button @click="addA">a+1</button>
</div>
</div>
這裏使用到計算屬性的主要是這一句
_v("a+b: " + _s(total))
那麼對於我們來說的關鍵就是_s(total)
。由於這個函數的with(this)
中,this
被設置爲vm實例,所以這裏就可以理解爲_s(vm.total)
。那麼這裏就會觸發之前定義的sharedPropertyDefinition.get
-> initComputed()
-> defineComputed()
-> Object.defineProperty(target, key, sharedPropertyDefinition)
也就是如下的內容:
coding...