共计 1724 个字符，预计需要花费 5 分钟才能阅读完成。

生命周期

vue 的声明周期描述为：

• 创建实例 beforeCreate \ created
• 初始化数据
• 模板编译
• 挂载 dom – 渲染 beforeMount \ mounted
• 更新 – 渲染 beforeUpdate \ updated
• 卸载 beforeDestroy \ Destroyed

activated \ deactivated keep-alive 组件 激活、停用时

errorCaptured 子孙组件出现错误时触发

描述各阶段声明周期做了什么？

主要了解 其对 vue 开发中有影响的部分

创建实例阶段

beforeCreate 是在创建实例时，此时 无法使用实例的数据和方法

created 是在完成实例的创建，此时 dom 元素还没有渲染，无法获取 dom

挂载 dom 阶段

beforeMount 是在实例挂载 dom 之前，此时实例已经通过 render 函数生成了虚拟 dom, 将虚拟 dom 渲染成真实 dom 的过程即将开始

mounted 是在实例挂载 dom 后，此时实例已经生成真实 dom，可以进行 dom 操作

更新渲染 阶段

beforeUpdate 是在 实例更新之前，此时实例的数据已经变化，即将生成虚拟 dom 还未生成虚拟 dom

updated 是在实例更新完成后 view 部分也更新了。

卸载阶段

beforeDestroy 是在实例卸载前，此时实例还存在，常用于 清理计时器、解绑事件等

destroyed 是在实例卸载后，此时 无法使用实例的数据和方法

声明周期与选项

vue 的响应式系统只对 data 和 props 中的数据生效

beforeCreate（此时无任何选项可用）
  ↓
处理 props → 处理 methods → 处理 data（响应式）→ 处理 computed → 处理 watch
  ↓
created（此时所有选项均已初始化，可通过 this 访问）
  ↓
后续生命周期（如 beforeMount、mounted 等，与 DOM 相关）

在 Vue 实例初始化过程中，选项 API 中常用选项（props、data、methods、computed、watch 等）的处理顺序是固定的，且均发生在 beforeCreate 之后、created 之前（即实例初始化阶段）。具体顺序如下：

核心处理顺序（从先到后）：

1. props首先处理 props，因为子组件需要优先接收父组件传递的参数，这些参数可能被后续的 data、methods 等依赖。处理逻辑：解析 props 配置，校验类型和默认值，将 props 挂载到实例（this）上。
2. methods接着初始化 methods 中的方法。处理逻辑：遍历 methods 配置，将每个方法绑定到实例（确保方法内的 this 指向当前组件实例），并挂载到 this 上。（先于 data 处理，是为了避免 data 中出现依赖 methods 方法的情况时，方法尚未定义导致错误。）
3. data然后处理 data 选项。处理逻辑：执行 data() 函数获取返回的对象，通过响应式系统（Vue 2 用 Object.defineProperty，Vue 3 用 Proxy）将其属性转为响应式，最后挂载到实例（this）上。（若 data 中的属性与 props 同名，props 会优先，data 中的属性会被忽略，避免冲突。）
4. computed之后初始化 computed 计算属性。处理逻辑：为每个计算属性创建依赖收集器，定义其 getter（用于计算值和依赖追踪）和 setter（可选），并将计算属性挂载到 this 上。（依赖 data 或 props，因此必须在 data 之后处理，才能正确追踪依赖关系。）
5. watch/watchEffect最后初始化 watch 监听器。处理逻辑：解析 watch 配置，确定监听的目标（data、props 或 computed），创建观察者实例，当目标变化时触发回调。（依赖前面的 data、props、computed，因此最后处理，确保监听的目标已存在且可被追踪。）

与生命周期的关系：

• 上述所有选项的处理，均发生在 beforeCreate 钩子执行之后，created 钩子执行之前。
• 因此，在 created 钩子中，this 已经可以访问到 props、data、methods、computed 的值，也可以调用 watch 监听的逻辑（但此时 DOM 尚未挂载）。
• beforeCreate 钩子中无法访问任何上述选项（因为均未处理）。