Function
) {
const shouldCache = !isServerRendering()
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: userDef
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)
}
在这段代码的最后调用了原生 Object.defineProperty 方法，其中传入的第三个参数是属性描述符sharedPropertyDefinition，初始化为：
const sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}随后根据 Object.defineProperty 前面的代码可以看到 sharedPropertyDefinition 的 get/set 方法在经过 userDef 和 shouldCache 等多重判断后被重写，当非服务端渲染时，sharedPropertyDefinition 的 get 函数也就是 createComputedGetter(key) 的结果，我们找到 createComputedGetter 函数调用结果并最终改写 sharedPropertyDefinition 大致呈现如下：
sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
watcher.depend()
return watcher.evaluate()
}
},
set: userDef.set 关键词：Vue中computed的完成原理是啥？