Vue2的Keep-Alive 有哪些生命周期钩子函数-51CTO.COM

1. vue2的keep-alive 有哪些生命周期钩子函数

在 Vue 2 中，<keep-alive> 组件为被包裹的组件引入了两个额外的生命周期钩子：activated 和 deactivated。

这两个钩子分别在组件被激活和停用时调用。

下面是这两个钩子的详细信息以及如何使用它们：

1.1. activated 钩子

当一个被 <keep-alive> 缠绕的组件被重新激活时（即从缓存中取出并重新添加到 DOM 中），activated 钩子将会被调用。

这是执行组件初始化工作或更新操作的好时机。

1.2. deactivated 钩子

当一个被 <keep-alive> 缠绕的组件被停用时（即从 DOM 中移除但仍然被缓存），deactivated 钩子将会被调用。

这通常用于释放资源或取消事件监听器等操作。

1.3. 使用示例

下面是一个简单的示例，展示了如何在一个组件中使用 activated 和 deactivated 钩子：

// MyComponent.vue
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from MyComponent!'
    };
  },
  activated() {
    console.log('MyComponent activated.');
    // 当组件被激活时做一些事情，如重新获取数据
  },
  deactivated() {
    console.log('MyComponent deactivated.');
    // 当组件被停用时做一些清理工作
  },
  methods: {
    fetchData() {
      // 假设这是一个获取数据的方法
      console.log('Fetching data...');
    }
  }
};

然后在父组件中使用 <keep-alive> 包裹 MyComponent：

<template>
  <div>
    <keep-alive>
      <my-component v-if="showMyComponent" />
    </keep-alive>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      showMyComponent: true
    };
  },
  methods: {
    toggleComponent() {
      this.showMyComponent = !this.showMyComponent;
    }
  }
};
</script>

在这个例子中，当点击按钮时，v-if 将会使 MyComponent 在 DOM 中切换显示和隐藏状态。

当 MyComponent 被隐藏时，它会被 <keep-alive> 缓存起来，并且会调用 deactivated 钩子；当再次显示时，会调用 activated 钩子。

通过这种方式，你可以有效地管理组件的生命周期，特别是在涉及到组件复用和性能优化的情况下。