详解vuecomputed的缓存实现原理
⽬录
初始化 computed
依赖收集
派发更新
总结⼀下
本⽂围绕下⾯这个例⼦，讲解⼀下computed初始化及更新时的流程，来看看计算属性是怎么实现的缓存，及依赖是怎么被收集的。
<div id="app">
<span @click="change">{{sum}}</span>
</div>
<script src="./vue2.6.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
count: 1,
}
},
methods: {
change() {
},
},
computed: {
sum() {
unt + 1
},
},
})
</script>
初始化 computed
vue初始化时先执⾏init⽅法，⾥⾯的initState会进⾏计算属性的初始化
if (optsputed) {initComputed(vm, optsputed);}
下⾯是initComputed的代码
var watchers = vm._computedWatchers = ate(null);
// 依次为每个 computed 属性定义⼀个计算watcher
for (const key in computed) {
const userDef = computed[key]
watchers[key] = new Watcher(
vm, // 实例
getter, // ⽤户传⼊的求值函数 sum
noop, // 回调函数可以先忽视
{ lazy: true } // 声明 lazy 属性标记 computed watcher
)
// ⽤户在调⽤ this.sum 的时候，会发⽣的事情
defineComputed(vm, key, userDef)
}
每个计算属性对应的计算watcher的初始状态如下：
{
deps: [],
dirty: true,
getter: ƒ sum(),
lazy: true,
value: undefined
}
可以看到它的 value 刚开始是 undefined，lazy 是 true，说明它的值是惰性计算的，只有到真正在模板⾥去读取它的值后才会
这个 dirty 属性其实是缓存的关键，先记住它。
接下来看看⽐较关键的 defineComputed，它决定了⽤户在读取 this.sum 这个计算属性的值后会发⽣什么，继续简化，排除掉⼀些不影响流程的逻辑。
Object.defineProperty(target, key, {
get() {
// 从刚刚说过的组件实例上拿到 computed watcher
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
// 只有dirty了才会重新求值
if (watcher.dirty) {
// 这⾥会求值，会调⽤get，会设置Dep.target
watcher.evaluate()
}
// 这⾥也是个关键等会细讲
if (Dep.target) {
watcher.depend()
}
// 最后返回计算出来的值
return watcher.value
}
}
})
这个函数需要仔细看看，它做了好⼏件事，我们以初始化的流程来讲解它：
⾸先 dirty 这个概念代表脏数据，说明这个数据需要重新调⽤⽤户传⼊的 sum 函数来求值了。我们暂且不管更新时候的逻辑，第⼀次在模板中读取到 {{sum}} 的时候它⼀定是 true，所以初始化就会经历⼀次求值。
evaluate () {
// 调⽤ get 函数求值
this.value = ()
// 把 dirty 标记为 false
this.dirty = false
}
这个函数其实很清晰，它先求值，然后把 dirty 置为 false。再回头看看我们刚刚那段 Object.defineProp
erty 的逻辑，下次没有特殊情况再读取到 sum 的时候，发现 dirty是false了，是不是直接就返回 watcher.value 这个值就可以了，这其实就是计算属性缓存的概念。
依赖收集
初始化完成之后，最终会调⽤render进⾏渲染，⽽render函数会作为watcher的getter，此时的watcher为渲染watcher。
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
// 创建⼀个渲染watcher，渲染watcher初始化时，就会调⽤其get()⽅法，即render函数，就会进⾏依赖收集
new Watcher(vm, updateComponent, noop, {}, true /* isRenderWatcher */)
看⼀下watcher中的get⽅法
get () {
// 将当前watcher放⼊栈顶，同时设置给Dep.target
pushTarget(this)
let value
const vm = this.vm
// 调⽤⽤户定义的函数，会访问到unt，从⽽访问其getter⽅法，下⾯会讲到
value = call(vm, vm)
// 求值结束后，当前watcher出栈
popTarget()
this.cleanupDeps()
return value
}
渲染watcher的getter执⾏时（render函数），会访问到this.sum，就会触发该计算属性的getter，即在initComputed时定义的该⽅法，会把与sum绑定的计算watcher得到之后，因为初始化时dirty为true，会调⽤其evaluate⽅法，最终会调⽤其get()⽅法，把该计算watcher放⼊栈顶，此时Dep.target也为该计算watcher。
接着调⽤其get⽅法，就会访问到unt，会触发count属性的getter（如下），就会将当前Dep.target存放的watcher收集到
新为渲染watcher。
// 在闭包中，会保留对于 count 这个 key 所定义的 dep
const dep = new Dep()
// 闭包中也会保留上⼀次 set 函数所设置的 val
let val
Object.defineProperty(obj, key, {
get: function reactiveGetter () {
const value = val
// Dep.target 此时就是计算watcher
if (Dep.target) {
// 收集依赖
dep.depend()
}
return value
},
})
// dep.depend()
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
// watcher 的 addDep函数
addDep (dep: Dep) {
// 这⾥做了⼀系列的去重操作简化掉
// 这⾥会把 count 的 dep 也存在⾃⾝的 deps 上
this.deps.push(dep)
// ⼜带着 watcher ⾃⾝作为参数
/
/ 回到 dep 的 addSub 函数了
dep.addSub(this)
}
class Dep {
subs = []
addSub (sub: Watcher) {
this.subs.push(sub)
}
}
通过这两段代码，计算watcher就被属性所绑定dep所收集。watcher依赖dep，dep同时也依赖watcher，它们之间的这种相互依赖的数据结构，可以⽅便知道⼀个watcher被哪些dep依赖和⼀个dep依赖了哪些watcher。
接着执⾏watcher.depend()
// watcher.depend
depend () {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
还记得刚刚的计算watcher 的形态吗？它的 deps ⾥保存了 count 的 dep。也就是说，⼜会调⽤ count 上的 dep.depend()
class Dep {
subs = []
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
}
这次的 Dep.target 已经是渲染watcher 了，所以这个 count 的 dep ⼜会把渲染watcher 存放进⾃⾝的 subs 中。
最终count的依赖收集完毕，它的dep为:
subs: [ sum的计算watcher，渲染watcher ]
}
派发更新
那么来到了此题的重点，这时候 count 更新了，是如何去触发视图更新的呢？
再回到 count 的响应式劫持逻辑⾥去：
// 在闭包中，会保留对于 count 这个 key 所定义的 dep
const dep = new Dep()
// 闭包中也会保留上⼀次 set 函数所设置的 val
let val
Object.defineProperty(obj, key, {
vue中reactiveset: function reactiveSetter (newVal) {
val = newVal
// 触发 count 的 dep 的 notify
}
})
})
好，这⾥触发了我们刚刚精⼼准备的 count 的 dep 的 notify 函数。
class Dep {
subs = []
notify () {
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
这⾥的逻辑就很简单了，把 subs ⾥保存的 watcher 依次去调⽤它们的 update ⽅法，也就是
1. 调⽤计算watcher 的 update
2. 调⽤渲染watcher 的 update
计算watcher的update
update () {
if (this.lazy) {
this.dirty = true
}
}
仅仅是把计算watcher 的 dirty 属性置为 true，静静的等待下次读取即可（再次执⾏render函数时，会再次访问到sum属性，此时的dirty为true，就会进⾏再次求值）。
渲染watcher的update
这⾥其实就是调⽤ vm._update(vm._render()) 这个函数，重新根据 render 函数⽣成的 vnode 去渲染视图了。
⽽在 render 的过程中，⼀定会访问到su 这个值，那么⼜回到sum定义的get上：
Object.defineProperty(target, key, {
get() {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
// 上⼀步中 dirty 已经置为 true, 所以会重新求值
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
// 最后返回计算出来的值
return watcher.value
}
}
由于上⼀步中的响应式属性更新，触发了计算 watcher 的 dirty 更新为 true。所以⼜会重新调⽤⽤户传⼊的 sum 函数计算出最新的值，页⾯上⾃然也就显⽰出了最新的值。
⾄此为⽌，整个计算属性更新的流程就结束了。
总结⼀下
1. 初始化data和computed，分别代理其set以及get⽅法, 对data中的所有属性⽣成唯⼀的dep实例。
2. 对computed中的sum⽣成唯⼀watcher，并保存在vm._computedWatchers中
3. 执⾏render函数时会访问sum属性，从⽽执⾏initComputed时定义的getter⽅法，会将Dep.target指向sum的watcher，并调
⽤该属性具体⽅法sum。
4. sum⽅法中访问unt，即会调⽤unt代理的get⽅法，将unt的dep加⼊sum的watcher，同时该dep中的
subs添加这个watcher。
5. 设置vm.count = 2，调⽤count代理的set⽅法触发dep的notify⽅法，因为是computed属性，只是将watcher中的dirty设置
为true。
6. 最后⼀步vm.sum，访问其get⽅法时，得知sum的watcher.dirty为true，调⽤其watcher.evaluate()⽅法获取新的值。
以上就是详解vue computed的缓存实现原理的详细内容，更多关于vue computed的缓存实现的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。