Vue 中 activated 和 deactivated 钩子函数的作用是什么？

推荐答案

在 Vue.js 中，activated 和 deactivated 是 keep-alive 组件特有的生命周期钩子函数。它们的作用如下：

• activated: 当组件被激活时调用，即组件从缓存中重新显示时触发。
• deactivated: 当组件被停用时调用，即组件被缓存时触发。

这两个钩子函数主要用于在组件被缓存和重新激活时执行一些特定的逻辑，比如数据的刷新、事件的绑定与解绑等。

本题详细解读

activated 钩子函数

activated 钩子函数在以下情况下被调用：

1. 当组件被 <keep-alive> 包裹时，组件首次渲染时会触发 activated。
2. 当组件从缓存中重新显示时（例如，用户从其他路由返回到该组件时），activated 会被再次调用。

这个钩子函数通常用于执行一些需要在组件重新显示时进行的操作，比如重新获取数据、重新绑定事件等。

deactivated 钩子函数

deactivated 钩子函数在以下情况下被调用：

1. 当组件被 <keep-alive> 包裹时，组件被缓存时会触发 deactivated。
2. 当组件从视图中移除时（例如，用户导航到其他路由时），deactivated 会被调用。

这个钩子函数通常用于执行一些在组件被缓存时需要进行的清理操作，比如解绑事件、取消定时器等。

使用场景

• 数据刷新: 在 activated 中重新获取数据，确保每次组件重新显示时数据是最新的。
• 事件管理: 在 activated 中绑定事件，在 deactivated 中解绑事件，避免内存泄漏。
• 资源释放: 在 deactivated 中释放一些资源，比如取消网络请求、清除定时器等。

示例代码

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  activated() {
    console.log('Component activated');
    // 重新获取数据或执行其他操作
  },
  deactivated() {
    console.log('Component deactivated');
    // 清理操作，如解绑事件、取消定时器等
  }
};
</script>

在这个示例中，当组件被激活时，activated 钩子函数会打印 "Component activated"，当组件被停用时，deactivated 钩子函数会打印 "Component deactivated"。