vue3中activated举例

在Vue 3中，`activated` 生命周期钩子通常用于非懒加载组件（即首次加载而非通过`keep-alive`缓存）。当你从父组件导航到一个包含此组件的子路由，然后返回到父组件再重新进入子组件时，`mounted` 钩子会在组件第一次渲染时被调用，而 `activated` 钩子则会在组件从不可见状态变为可见时被调用。

举个例子，假设你有一个新闻列表组件 (`NewsList.vue`)，它从服务器获取数据并在首次加载时填充列表。如果你的组件配置了 `v-model` 或者做了其他数据相关的操作，那么在初次 `mounted` 时，你会设置默认的数据或者发送请求获取数据。

<template>
  <div ref="newsList">
    <!-- 数据列表 -->
  </div>
</template>

<script setup>
import axios from 'axios'

const newsData = ref([]) // 假设这是我们的新闻数据

onMounted(async () => {
  const response = await axios.get('/api/news') // 获取初始数据
  newsData.value = response.data
}) 

// 当路由回到 NewsList 组件时，会触发 activated
onActivated(() => {
  if (!newsData.value.length) { // 如果数据为空，可能需要再次请求
    refreshNewsData()
  }
})

function refreshNewsData() {
  // 更新数据逻辑
}
</script>

在这个场景下，`activated` 确保只有在用户真的看到并交互数据时才执行刷新数据的操作，避免了不必要的网络请求，提高了性能。