核心原理就是用一个 Map 缓存VNode（虚拟DOM节点）。更具体来说，在KeepAlive组件的 slot 发生变化时会触发 KeepAlive 本身的更新。然后通过在KeepAlive内部调用slots.default()[0]可以获取到需要被缓存的组件实例，组件的name作为key，VNode作为value塞到map里就行了。当然还有一些优化细节，比如除了Map之外，还新建了一个Set用来优化缓存索引。
keep-alive的作用会缓存不活动的组件实例,而不是销毁它们。当组件在<keep-alive>内被切换,activated和deactivated这两个生命周期钩子函数将会被对应执行。 注意:activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序cre...
<keep-alive>是Vue提供的一个内置组件,用于缓存组件状态或避免组件的重复渲染。当组件被<keep-alive>包裹时,它的状态会被保留在内存中,而不是被销毁,这样在下一次访问时,组件可以快速地恢复状态,而不需要重新渲染,从而提高应用的性能。 2. 列举<keep-alive>包裹的组件特有的生命周期钩子 ...
//被keep-alive包含的组件会被缓存<keep-alive><component/></keep-alive> 被keep-alive包含的组件不会被再次初始化,也就意味着不会重走生命周期函数。 但是有时候是希望我们缓存的组件可以能够再次进行渲染,这时 Vue 为我们解决了这个问题 被包含在keep-alive中创建的组件,会多出两个生命周期的钩子:activated与d...
先说下这个生命周期钩子,官网说其是在服务器端渲染期间不被调用, 说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存,也就是没有被<keep-alive>包裹的话,activated是不起作用的。我们直接来试一下就知道了。 代码语言:javascript
keep-alive生命周期钩子函数:activated、deactivated 使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。 附录 生命周期函数:就是vue在某个时间段会自动执行的函数 ...
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中。 当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。
KeepAlive组件的本质是缓存管理以及特殊的挂载/卸载逻辑。被KeepAlive包裹的组件在卸载的时候并不是真正的卸载,而是将该组件搬运到一个隐藏的容器中,实现假卸载,从而使得组件可以维持当前状态。而当挂载的时候,会讲它从隐藏容器中搬运到原容器。 KeepAlive组件提供了activate和deactivate两个生命周期函数来实现挂载和卸载...
</keeo-alive> 生命周期钩子: 这篇既然是Vue钩子函数的专场,那肯定要扣题呀~ 在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated与deactivated。 文档:在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。
},deactivated:function() {alert("keepAlive停用"); },activated:function() {console.log('component activated'); },beforeDestroy:function() {console.group('beforeDestroy 销毁前状态===》');varstate = {'el':this.$el,'data':this.$data,'message':this.message}console.log(this.$el);console....