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

目录

作用

区别

举个例子

调用顺序

---

作用

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

区别

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

比如如我的下图

举个例子

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

1. ComponentA（普通组件）:

   • 当你首次访问 ComponentA 时，它的 created 钩子会被调用。这是初始化数据或进行 API 调用的好时机。
   • 如果你离开 ComponentA（比如切换到另一个组件）然后再回来，ComponentA 将被重新创建，created 钩子再次被调用。

2. 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');
    // 每次从缓存中激活时要执行的操作
  },
  // ... 其他选项 ...
}

• created 钩子：对于任何组件（无论是否被 <keep-alive> 包裹），created 钩子在组件创建时调用一次。
• activated 钩子：仅适用于被 <keep-alive> 包裹的组件。每次组件从缓存中激活时调用，即使组件已经被创建过。

这个区别意味着 created 钩子是用于组件初始化时的操作，而 activated 钩子适用于那些需要在每次显示时刷新或更新的场景。

调用顺序

如果组件是第一次被创建，created 和 activated 钩子都会被调用，且 created 会先于 activated 调用。

------------------------------------------与正文内容无关------------------------------------
如果觉的文章写对各位读者老爷们有帮助的话，麻烦点赞加关注呗！作者在这拜谢了!

如果你需要Java 、Python毕设、网页和系统设计，还有你是刚入职的新手需要度过试用期。联系方式微信：Romanticl99 网名：A乐神