介绍vue3的钩子函数activated和deactivated使用场景
阅读原文时间:2023年09月27日阅读:1

activated和deactivated是Vue3中的两个生命周期钩子函数。

activated钩子函数在组件被激活时调用,通常用于恢复组件的状态或执行一些初始化操作。例如,如果一个组件被从路由中激活,你可能需要在该组件被激活时从本地存储中加载一些数据。

下面是一个示例代码:

在上面的示例代码中,当用户点击“Load Data”按钮时,会触发loadData函数,从服务器获取数据并更新组件状态。当用户访问其他路由时,该组件会被停用,此时会调用onDeactivated钩子函数清理组件状态或取消异步请求等操作。当用户再次访问该组件所在的路由时,该组件会被激活,此时会调用onActivated钩子函数恢复组件状态或执行一些初始化操作。