第 4 卷

◦ 当组件首次进入 keep-alive 时，执行组件的创建生命周期（ created、 mounted），

◦ 当组件被切换（隐藏）时，Vue不会销毁组件实例，而是将其从DOM中移除，组件状态保留在

cache 中；

1. 组件激活：

◦ 当组件再次被切换（显示）时，从 cache 中取出对应的组件实例VNode，重新渲染到DOM

中，执行 activated 生命周期（Vue2/Vue3均支持）；

• 若组件不在 cache 中，则重新创建组件实例并缓存；

1. 缓存控制：

• include：字符串/正则/数组，只有名称匹配的组件才会被缓存；
• exclude：字符串/正则/数组，名称匹配的组件不会被缓存；

◦ max：数字，设置缓存上限，当缓存数量超过 max 时，按照LRU策略删除最久未使用的组件

缓存；

1. 生命周期钩子：

◦ 缓存组件新增两个生命周期： activated（组件激活时触发）、 deactivated（组件失

活时触发）；

• 缓存组件不会执行 unmounted / destroyed，除非手动清除缓存或超过 max 被淘汰。

三、具体缓存的内容

keep-alive 缓存的是组件的实例对象（VNode实例）及其内部状态，具体包括：

1. 组件的响应式数据（ data、 props、 computed 等）；
2. 组件的DOM结构（虚拟DOM节点，无需重新生成）；
3. 组件的生命周期状态（已执行的生命周期钩子记录）；
4. 组件内部的子组件实例、指令实例等；
5. 不缓存的内容：组件的临时状态（如非响应式数据、DOM事件的临时绑定，若需保留需手动处

理）。

12. $nextTick方法：原理与用途

一、 $nextTick的核心原理

$nextTick（Vue2）/ nextTick（Vue3）是Vue提供的异步方法，用于在视图更新完成后执行回调函数，其原理与Vue的异步更新队列紧密相关：

1. 当Vue的异步更新队列执行完毕，视图已完成更新，此时 $nextTick 的回调函数才会执行，确保

回调中能获取到更新后的DOM；

1. 底层实现（优先级从高到低）：

• Vue2/Vue3：优先使用 Promise.then（微任务）；

◦ 兼容处理：若环境不支持Promise，使用 MutationObserver（微任务），再降级为

setTimeout（宏任务）。

二、 $nextTick的常见用途

1. 获取更新后的DOM元素：

• 场景：修改数据后，需要立即获取DOM元素的尺寸、内容或操作DOM；

◦ 示例：

Code block

1this.msg = '更新后的数据' 2// 此时DOM未更新，获取不到最新内容

1. 在组件切换/渲染后执行逻辑：

◦ 场景：使用 v-if 控制组件显示隐藏，需要在组件显示后执行初始化逻辑（如第三方插件初始

化）；

1. 批量修改数据后统一执行回调：

◦ 场景：同一事件循环中多次修改数据，需要在所有数据更新、视图渲染完成后，执行统一的逻

辑（如提交表单、发送请求）；

1. 解决视图更新延迟导致的问题：

• 场景：如滚动条位置恢复、表单焦点设置等，需要在视图更新后操作，否则会失效；

1. Vue3组合式API中使用：

◦ Vue3中取消了组件实例的 $nextTick，需手动导入 nextTick 函数使用：

5await nextTick()

6console.log(document.getElementById('box').innerText) // 新值 7}

13. Vuex的工作原理 & 角色与重要性

一、 Vuex的工作原理

Vuex基于单向数据流设计，核心是实现全局状态的统一管理，其工作流程如下（闭环流程）：

1. State：全局唯一的状态容器，存储应用的所有全局状态，通过 Vue（Vue2）/ reactive

（Vue3）实现响应式；

1. 组件触发Action：组件通过 this.$store.dispatch('actionName', payload) 分发

Action（可异步操作，如接口请求）；

1. Action提交Mutation：Action内部通过 context.commit('mutationName', payload)

提交Mutation（Action本身不修改状态，仅处理异步逻辑）；

1. Mutation修改State：Mutation是唯一能修改State的入口，接收State和payload，同步修改

State（必须同步，便于Devtools追踪状态变化）；

1. State更新驱动视图更新：State是响应式的，当State被修改后，依赖State的组件会自动重新渲

染，更新视图；

1. Getter派生状态：组件通过 this.$store.getters.getterName 获取派生状态（类似计算

属性，缓存结果，依赖变化时重新计算）；

1. Module拆分：对于大型应用，通过Module将全局状态拆分为多个子模块，每个模块拥有独立的

State、Getter、Mutation、Action，支持命名空间隔离。

二、 Vuex在状态管理中的角色和重要性

1. 核心角色

• 全局状态容器：充当应用全局状态的“仓库”，集中存储所有组件共享的状态（如用户信息、全局

配置、购物车数据等）；

• 状态管理中枢：统一管理状态的读取、修改流程，避免组件间直接修改状态，实现“单向数据

流”，便于状态追踪和调试；

• 组件通信桥梁：解决多层嵌套组件（跨层级、跨组件）通信的繁琐问题，组件无需通过

props / emit 逐层传递数据，直接通过 $store 访问全局状态；

• 状态变更追踪：集成Vue Devtools，可实时查看State的变化记录、回溯状态修改流程，便于排查