考察点分析

本题主要考察以下维度：

  1. Vue版本差异理解：对Options API与Composition API设计差异的掌握程度
  2. 生命周期机制：不同版本生命周期钩子的触发时机与使用场景
  3. 组合式API原理：setup函数执行时机及其对传统生命周期的替代方案

具体评估点：

  • 组合式API钩子命名规范的设计意图
  • setup函数与beforeCreate/created的执行顺序关系
  • 传统选项式生命周期在组合式模式下的迁移策略
  • 组合式API中重复注册生命周期回调的能力
  • 响应式系统初始化的阶段差异

技术解析

关键知识点

  1. 命名规则：onXxx函数式注册 > 选项声明式
  2. 执行时机：setup函数介于beforeCreate和created之间
  3. 替代方案：setup函数直接执行代码替代created逻辑

原理剖析

组合式API通过onMounted等函数注册生命周期回调，其命名采用动词+生命周期的结构（如onMounted），强调主动订阅行为。这种设计：

  • 与watch等API保持命名一致性
  • 支持多次调用注册多个回调
  • 需显式导入避免全局污染

setup()执行阶段替代了传统选项中的beforeCreate和created：

  组件初始化
    ↓ 
beforeCreate
    ↓ 
setup() 执行
    ↓ 
created

在setup中：

  • 同步代码相当于created阶段执行
  • 无法访问beforeCreate阶段的组件实例（此时未初始化）

常见误区

  1. 错误尝试在setup中调用onCreated（不存在该API）
  2. 误认为setup完全替代所有生命周期（仍需通过钩子函数处理挂载后逻辑）
  3. 在setup外混合使用选项式生命周期导致执行顺序混乱

问题解答

组合式API将生命周期钩子改为on+大写事件名的函数形式（如onMounted），这种命名模式：

  1. 符合函数式编程范式，通过导入函数主动注册回调
  2. 支持同一生命周期注册多个处理函数
  3. 与watch(onInvalidate)等API命名风格统一

对于beforeCreate和created：

  • 其功能被setup()函数替代
  • setup()内的同步代码在beforeCreate之后、created之前执行
  • 原本在created中的初始化逻辑可直接写入setup顶层作用域
  • 需要beforeCreate的场景可使用选项API混合写法（不推荐）

解决方案

代码示例 

  import { onMounted } from 'vue'

export default {
  setup() {
    // 替代created的初始化逻辑
    const data = ref(null)
    
    // 替代mounted逻辑
    onMounted(async () => {
      data.value = await fetchData()
    })

    // 错误示例：试图访问未初始化的DOM
    // document.querySelector(...) 

    return { data }
  },
  // 必要时的传统钩子混合使用
  beforeCreate() {
    // 极少数需要早于setup执行的逻辑
  }
}

可扩展性建议

  1. 复杂逻辑使用setup函数拆分到独立hooks
  2. 异步初始化使用Suspense组件处理加载状态
  3. 性能敏感场景使用onDeactivated清理资源

深度追问

  1. 为什么没有onBeforeCreate？
    → 因组件实例在setup执行前未完成初始化，无法安全操作

  2. 多次调用onMounted的执行顺序？
    → 按注册顺序同步执行，类似队列处理

  3. SSR中的onMounted行为差异？
    → 在服务端渲染时不会执行客户端专属钩子

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history