面试题：mounted 生命周期和 keep-alive 中的 activated 钩子的优先级是什么？

在 Vue 中，mounted 生命周期钩子和 keep-alive 中的 activated 钩子的触发时机和优先级是不同的。以下是它们的详细区别和优先级说明：

1. `mounted` 生命周期钩子

触发时机：
- mounted 是 Vue 组件的生命周期钩子之一，在组件首次挂载到 DOM 后触发。
- 只有在组件第一次渲染时才会触发。
适用场景：
- 适合执行 DOM 操作、初始化数据、发起异步请求等操作。

export default {
  mounted() {
    console.log('mounted');
  },
};

2. `activated` 钩子

触发时机：
- activated 是 keep-alive 组件特有的钩子，当被缓存的组件重新激活时触发。
- 如果组件被 keep-alive 包裹，当组件从缓存中恢复显示时，activated 会被调用。
适用场景：
- 适合在组件重新显示时执行一些逻辑，例如刷新数据、恢复状态等。

export default {
  activated() {
    console.log('activated');
  },
};

3. 优先级和触发顺序

组件首次渲染：
- 如果组件是第一次渲染，且被 keep-alive 包裹，会依次触发以下钩子：
  1. created
  2. mounted
  3. activated

  export default {
    created() {
      console.log('created');
    },
    mounted() {
      console.log('mounted');
    },
    activated() {
      console.log('activated');
    },
  };

输出顺序：

  created
  mounted
  activated

组件从缓存中恢复：
- 如果组件已经被缓存，再次显示时，只会触发 activated，而不会触发 mounted。
- 因为组件没有被销毁和重新创建，只是从缓存中恢复。输出顺序：

  activated

4. 总结

钩子	触发时机	优先级
`mounted`	组件首次挂载到 DOM 后触发	首次渲染时触发
`activated`	被 `keep-alive` 缓存的组件重新激活时触发	每次激活时触发