activated 执行时机问题

来源:10-5 keep-alive(5)

六一888

2020-02-14

电子文档中说到:
这里判断如果是被 包裹的组件已经 mounted,那么则执行 queueActivatedComponent(componentInstance) ,否则执行 activateChildComponent(componentInstance, true)。

但是在单步调试时,A 组件已经执行了 mounted 钩子,并且 context._isMounted 为 false,进入到 activateChildComponent 函数中。

通过打印知道这个 context 是 Vue 实例,进入到组件 insert 钩子时,传入的是组件 keep-alive vnode 时,context.isMounted 才为 true。

但是在首次渲染时 Vue 实例的 mounted 是最后被执行的(即在 context._isMounted 为 true 之后),我对 context._isMounted 被转成 true 的时机有疑惑,对于电子文档的描述的理解也有疑惑。

写回答

3回答

ustbhuangyi

2020-02-15

//img1.sycdn.imooc.com/szimg/5e47bedc09fe307521660650.jpg
我刚测试了一下这个 demo
//img.mukewang.com/szimg/5e47bf0509fb6aac16200712.jpg
在这里加了一个 debugger,2 次执行到这里的时候, context._isMouted,也就是最外层的 Vue 实例 vm 的 _isMounted 都为 false

0
1
六一888
非常感谢!
2020-02-15
共1条回复

六一888

提问者

2020-02-15

//img.mukewang.com/szimg/5e47a9180984a3c114720326.jpg

前面都是在 insert 函数中打印的 vnode 和 vnode.context,在执行 Vue mounted 之前,keep-alive 组件 vnode.context._isMounted 就为 true

0
0

ustbhuangyi

2020-02-15

//img1.sycdn.imooc.com/szimg/5e4793e009c35aea17640656.jpg
_isMounted 是在插入 DOM 节点的时候设置为 true。

另外我不知道你的 A 组件是什么,你能否贴一下你调试的 Demo 代码,你看到执行 mounted 钩子的组件 vm 和你的 context._isMounted 的 context 是不是同一个 vm 实例,需要你确认一下。

0
8
六一888
回复
ustbhuangyi
老师,我自己脑子短路了,搞了个乌龙,实际上是在执行 Vue mounted 钩子后,在控制台中 A 组件 vnode 和 keep-alive 组件 vnode 中的 context._isMounted 自动更新为最新数据,我自己无中生有了一个问题,浪费老师时间啦!
2020-02-15
共8条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程