【组件缓存相关生命周期函数】

哒马不好玩2024-06-28 13:19

复制代码

	在Vue开发中，有时需要在组件被激活或者被缓存时执行某些操作。为此，Vue 提供了组件缓存相关的生命周期函数，可以监听组件被激活和组件被缓存的事件。

当组件被激活时，会触发组件的onActivated( )生命周期函数;当组件被缓存时，会触发组件的onDeactivated( )生命周期函数。这两个生命周期函数的语法格式如下。

csharp 复制代码

onActivated( () =>{ })
onDeactivated ( () = >{ } )

接下来通过实际操作的方式演示缓存相关的生命周期函数的使用，具体步骤如下。

① 修政src\components\MyLeft.vue 文件，在

csharp 复制代码

<script setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
 onActivated (()=> {
console .1og ('MyLeft 组件被激活了'）
 })
 onDeactivated(() => {
console.1og ('MyLeft 组件被缓存了"）
})
</script>

复制代码

保存上述代码后，在浏览器中访问 http://127.0.0.1:5173/。

控制台中输出了 MyLeft 组件被挂载和被激活的信息，说明当 MyLeft

第一次被挂载完成的时候，会执行 MyLeft 组件的 onMounted(）和 onActivated()函数。