在keep-alive中缓存的组件添加了两个生命周期activated和deactivated，缓存的组件经常使用生命周期activated。 那么，这两个生命周期和vue的其他生命周期是如何排序和运行的呢？
我们知道VUE的其他生命周期就是这样的：
image.png
activated这个生命周期是？
从源代码src/core/vdom/create-component.js中可以看到以下内容：
插入(vnode : mountedcomponentvnode ) {
const { context，componentInstance }=vnode
if (！ 组件实例. _ is mounted ) {
component instance._ is mounted=true
callhook(componentinstance，' mounted ' )。
}
if(vnode.data.keepalive ) {
上下文. _ is mounted (if ) {
//vue-router#1212
//During updates，a kept-alive component ' schildcomponentsmay
//change，sodirectlywalkingthetreeheremaycallactivatedhooks
//onincorrectchildren.insteadwepushthemintoaqueuewhichwill
//beprocessedafterthewholepatchprocessended。
queueactivatedcomponent (component instance )。
} else {
activatechildcomponent (component instance，true /* direct */)
}
}
}
正如您在上面的源代码中看到的，在挂载了组件mounted之后，您将返回来确定当前组件是否为vnode.data.keepAlive。 如果context._isMounted为true，则直接调用行走树可能会在不正确的子组件上激活队列，因为keep-alive组件的子组件可能会更改
src/core/observer/scheduler.js
//*
* queueakept-alivecomponentthatwasactivatedduringthepatch。
* thequeuewillbeprocessedaftertheentiretreehasbeenpatched。
*/
外部功能组件(VM :组件)。
//setting _ inactivetofalseheresothatarenderfunctioncan
//relyoncheckingwhetherit ' sinaninactivetree (e.g.router-view )。
vm._inactive=false
activatedChildren.push(vm )
}
.
.
//*
* pushawatcherintothewatcherqueue。
* jobswithduplicateidswillbeskippedunlessit ' s
* pushedwhenthequeueisbeingflushed。
*/
外部功能queuewatcher (watcher : watcher )。
const id=watcher.id
if (has [ id ]==空值) {
has[id]=true
if (！ flushing ()。
queue.push(Watcher ) )。
} else {
//if already flushing，splice the watcher based on its id
//if already past its id，it will be run next immediately。
let i=queue.length - 1
wile (iindex queue [ I ].id watcher.id ) )。
i--
}
queue.splice (i1，0，watcher ) ) ) ) )。
}
//queue the flush
if (！ 等待()。
waiting=true
if(process.env.node_env！=='production '！ config.async ) {
flushSchedulerQueue (
返回
}
下一个(flushschedulerqueue ) )。
}
}
}
上面的代码进行队列处理。
src/core/instance/lifecycle.js
外部组件(VM :组件，direct？布尔) {
if (直接) {
vm._directInactive=false
初始化活动树(VM ) }
返回
}
}elseif(VM._directinactive ) )
返回
}
if (VM._ inactive|| VM._ inactive==null ) )
vm._inactive=false
for(letI=0； i vm.$children.length； I ) {
activatechildcomponent (VM.$ children [ I ] ) ) ) ) ) ) ) activatechildcomponent (VM.$ children [ I ] ) ) ) )
}
呼叫主页(VM，' activated ' ) )。
}
}
上面是开始activated的地方
deactivated是什么时候被调用的？
src/core/instance/lifecycle.js
外部activatechildcomponent (VM : component，direct？布尔) {
if (直接) {
vm._directInactive=true
初始化活动树(VM ) }
返回
}
}
if (！ vm._inactive ) {
vm._inactive=true
for(letI=0； i vm.$children.length； I ) {
dactivatechildcomponent (VM.$ children [ I ] ) ) ) ) )。) ) ) )。
}
呼叫主页(VM，' deactivated ' ) )。
}
}
src/core/vdom/create-component.js
estroy (vnode : mountedcomponentvnode ) )。
const { componentInstance }=vnode
if (！ 组件实例. _ is destroyed ) {
if (！ vnode.data.keepAlive ) {
组件实例. $ destroy (
} else {
deactivatechildcomponent (component instance，true /* direct */) ) ) ) ) ) )。
}
}
}
如果组件是vnode.data.keepAlive，则直接调用deactivateChildComponent，启动deactivated，不执行$destroy。
以上是在VUE中的keep-alive中的activated、deactivated这两点发生的生命周期的位置。 如果错了的话请在评论中指出来。