Vue created()和 activated()区别和作用调用顺序

作用

区别

举个例子

调用顺序

作用

简单说都是用于页面初始化，土话说一进来页面，去进行数据加载或调用方法的

区别

首先activated 钩子只适用于被 <keep-alive> 包裹的组件。对于不被 <keep-alive> 包裹的组件，activated 钩子不会被调用。你可能会说我的activated （）所在方法页面没看见 <keep-alive>，那这个可能放在你父类的页面中你可以看看，比如App.vue、main.vue等。

比如如我的下图

举个例子

ComponentA 和 ComponentB。ComponentA 是一个普通组件，而 ComponentB 是被 <keep-alive> 包裹的组件。我们将观察这两个组件如何响应 created 和 activated 钩子。

ComponentA（普通组件）:
- 当你首次访问 ComponentA 时，它的 created 钩子会被调用。这是初始化数据或进行 API 调用的好时机。
- 如果你离开 ComponentA（比如切换到另一个组件）然后再回来，ComponentA 将被重新创建，created 钩子再次被调用。
ComponentB（被 <keep-alive> 包裹的组件）:
- 当你首次访问 ComponentB 时，它的 created 和 activated 钩子都会被调用。
- 然后，如果你离开 ComponentB，它不会被销毁，而是保持在内存中。
- 当你再次访问 ComponentB 时，由于组件已经被创建，created 钩子不会被再次调用。但是，activated 钩子会被调用，因为这个组件是从 <keep-alive> 缓存中被重新激活的。

<component-a v-if="isComponentAVisible"></component-a>
<!-- 在 App.vue 或其他父组件中 -->
<keep-alive><component-b v-if="isComponentBVisible"></component-b>
</keep-alive>

// ComponentA
export default {created() {console.log('ComponentA - created');// 初始化操作，比如 API 调用},// ... 其他选项 ...
}// ComponentB
export default {created() {console.log('ComponentB - created');// 初始化操作，比如 API 调用},activated() {console.log('ComponentB - activated');// 每次从缓存中激活时要执行的操作},// ... 其他选项 ...
}