vue3中activated代码示例

在 Vue3 中，`activated` 生命周期钩子是在组件实例挂载到 DOM 并且数据已经初始化之后执行。这个钩子主要用于处理一些只在组件第一次激活时运行的操作，比如从服务器获取数据并填充页面。

下面是一个简单的 `activated` 示例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    // 当组件首次被激活时（即第一次渲染）
    // 这里可以假设我们有一个异步操作来获取数据
    async function fetchData() {
      await fetchSomeData().then(data => (message.value = data));
    }

    // 使用 Vue 的 onBeforeMount 钩子确保数据加载后再更新视图
    onBeforeMount(fetchData);

    return {
      message
    };
  }
}
</script>

在这个例子中，当组件首次加载时，`fetchData` 函数会发起数据请求，然后设置 `message` ref 的值。这样，只有在数据准备好并且页面渲染完成之后，`message` 会被显示在页面上。