Options API 怎么在 keep-alive 缓存的组件中使用 activated 钩子更新数据-Vue.js-PHP中文网

activated 是 keep-alive 组件被激活、重新插入 dom 时触发的生命周期钩子，用于每次切回页面时刷新数据、重置状态或重启定时器等操作。

options api 怎么在 keep-alive 缓存的组件中使用 activated 钩子更新数据

用了 keep-alive 后，组件不会重新创建，所以 mounted 只执行一次，后续切换回来时数据就“卡住”了。想每次显示都刷新数据，就得在 activated 钩子里动手。

activated 是什么时机触发的

activated 是 Options API 中专为 keep-alive 组件设计的生命周期钩子，它在组件从缓存中被激活、重新插入 DOM 时立即执行——也就是用户切回来、页面再次可见的那一瞬间。

它不依赖路由变化或 props 更新，只和组件是否“醒过来”有关，非常适合做数据拉取、状态重置、定时器重启等操作。

在 Options API 中正确写法

直接在组件选项对象里声明 activated 方法即可，不需要额外导入或注册：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

写在 methods 外面，和 mounted、created 同级
函数内部可以访问 this，能调用 data、methods、computed
推荐把异步请求封装成独立方法，便于复用和测试

示例：

export default {
  name: 'UserList',
  data() {
    return {
      list: [],
      loading: false
    }
  },
  methods: {
    async fetchList() {
      this.loading = true
      try {
        const res = await api.getUserList()
        this.list = res.data
      } finally {
        this.loading = false
      }
    }
  },
  activated() {
    // 每次切回来都重新拉数据
    this.fetchList()
  },
  // mounted 只执行一次，这里不用再拉
  mounted() {
    // 可以做初始化设置，比如权限检查、首次加载提示等
  }
}

注意避免常见坑

不要在 activated 里重复初始化响应式数据：data 已存在，直接赋值即可，不用 this.$set 或重新声明
慎用同步逻辑阻塞渲染：如果 activated 里有大量计算或未 await 的 Promise，可能影响页面响应，建议异步操作加 await 或包裹在 nextTick
配合 deactivated 做清理：比如有定时器、EventBus 监听、WebSocket 连接，应在 deactivated 中清除，防止内存泄漏
路由参数变化时需手动监听：如果数据依赖 $route.params 或 $route.query，要在 activated 里判断是否变化，再决定是否重拉

需要按条件刷新？加个简单判断

比如只在查询参数变了才更新：

activated() {
  const currentQuery = JSON.stringify(this.$route.query)
  if (currentQuery !== this.lastQuery) {
    this.lastQuery = currentQuery
    this.fetchList()
  }
},
data() {
  return {
    lastQuery: ''
  }
}

或者用 watch 监听 $route（需开启 watch: { $route: { handler() { ... }, immediate: true } }），但 activated 更轻量、更可控。