目录初始化 computed依赖收集派发更新总结一下本文围绕下面这个例子,讲解一下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() {
this.count = 2
},
},
computed: {
sum() {
return this.count + 1
},
},
})
</script>
vue初始化时先执行init方法,里面的initState会进行计算属性的初始化
if (opts.computed) {initComputed(vm, opts.computed);}
下面是initComputed的代码
var watchers = vm._computedWatchers = Object.create(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 = this.get()
// 把 dirty 标记为 false
this.dirty = false
}
这个函数其实很清晰,它先求值,然后把 dirty 置为 false。再回头看看我们刚刚那段 Object.defineProperty 的逻辑,下次没有特殊情况再读取到 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 )
看一下watcher中的get方法
get () {
// 将当前watcher放入栈顶,同时设置给Dep.target
pushTarget(this)
let value
const vm = this.vm
// 调用用户定义的函数,会访问到this.count,从而访问其getter方法,下面会讲到
value = this.getter.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方法,就会访问到this.count,会触发count属性的getter(如下),就会将当前Dep.target存放的watcher收集到count属性对应的dep中。此时求值结束,调用popTarget()将该watcher出栈,此时上个渲染watcher就在栈顶了,Dep.target重新为渲染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, {
set: function reactiveSetter (newVal) {
val = newVal
// 触发 count 的 dep 的 notify
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 方法,也就是
计算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 函数计算出最新的值,页面上自然也就显示出了最新的值。
至此为止,整个计算属性更新的流程就结束了。
以上就是详解vue computed的缓存实现原理的详细内容,更多关于vue computed的缓存实现的资料请关注编程网其它相关文章!
--结束END--
本文标题: 详解vue computed的缓存实现原理
本文链接: https://www.lsjlt.com/news/123105.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0