vue中使用keepAlive及使用后生命周期的改变

Posted 2023-04-19

参考技术A

keep-alive的介绍如下：

1、在App.vue中设置：（根据是否需要缓存切换模式）

2、在router.js路由页设置：

vue2.1.0 新增了include，exclude俩个属性，允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

举个栗子(1)：列表页回到上次浏览位置

vue3的生命周期

参考技术A

vue3的组合式api中，setup中的函数执行相当于在选项api中的beforeCreate和created中执行

除了beforeCreate和created外， 其他生命周期的使用都需要提前引入（轻量化）

除了beforeCreate和created被setup取代之外，选项式api和组合式api的映射如下：

beforeMount -> onBeforeMount ，在挂载前被调用

mounted -> onMounted ，挂载完成后调用

beforeUpdate -> onBeforeUpdate ，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上

updated -> onUpdated ，数据更新后调用，此时内存数据已经修改，页面数据也已经更新

beforeUnmount -> onBeforeUnmount ，组件卸载前调用

unmounted -> onUnmounted ，卸载组件实例后调用。

errorCaptured -> onErrorCaptured ，每当事件处理程序或生命周期钩子抛出错误时调用

renderTracked -> onRenderTracked ，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象

renderTriggered -> onRenderTriggered ，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象

activated -> onActivated ，与keep-alive一起使用，当keep-alive包裹的组件激活时调用

deactivated -> onDeactivated ，与keep-alive一起使用，当keep-alive包裹的组件停用时调用