Vue3 onActivated

介绍

在 Vue3 中，通过 onActivated 生命周期钩子函数，我们可以在组件被激活时执行一些特定的操作。本文将详细介绍 onActivated 钩子函数的用法和注意事项。

Vue3 生命周期钩子

Vue3 对生命周期钩子函数进行了一些调整和优化。在 Vue2 中，有一些钩子函数被废弃或重命名，同时还引入了一些新的生命周期钩子函数。其中之一就是 onActivated。

onActivated 钩子函数

onActivated 是 Vue3 中的一个生命周期钩子函数，用于在组件被激活时执行特定的操作。它在组件的 setup 函数中使用。

语法

import { onActivated } from 'vue';

export default {
  setup() {
    onActivated(() => {
      // 执行一些操作
    });
  }
};

示例

让我们通过一个简单的示例来说明 onActivated 的用法。假设我们有一个名为 ArticleList 的组件，在该组件被激活时，我们想要加载文章列表数据。可以使用 onActivated 钩子函数来实现这个需求。

import { onActivated } from 'vue';

export default {
  setup() {
    onActivated(() => {
      // 模拟异步请求获取文章列表数据
      fetch('https://api.example.com/articles')
        .then(response => response.json())
        .then(data => {
          // 处理文章列表数据
          console.log(data);
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    });
  }
};

在上面的示例中，我们使用 fetch 方法模拟异步请求来获取文章列表数据。在组件被激活时，会触发 onActivated 钩子函数，然后执行异步请求，并处理返回的数据。

注意事项

在使用 onActivated 钩子函数时，需要注意以下几点：

1. 组件需要在 <router-view> 内

onActivated 钩子函数只有在组件在 <router-view> 内被激活时才会被调用。如果组件不在 <router-view> 内，那么 onActivated 钩子函数将不会生效。

2. 在组件首次加载时不会触发

onActivated 钩子函数只会在组件被激活时触发，而不是在组件首次加载时触发。如果你需要在组件首次加载时执行一些操作，可以使用 onBeforeMount 钩子函数代替。

3. 只有通过路由切换激活时才会触发

onActivated 钩子函数只有在通过路由切换激活组件时才会触发。如果你通过其他方式（例如手动调用组件）激活组件，onActivated 钩子函数将不会被调用。

总结

在 Vue3 中，onActivated 是一个生命周期钩子函数，用于在组件被激活时执行特定的操作。它在组件的 setup 函数中使用，并且只有在组件在 <router-view> 内被激活时才会被调用。需要注意的是，onActivated 钩子函数不会在组件首次加载时触发，并且只有通过路由切换激活组件时才会触发。