组合式API生命周期变化

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

本题主要考察以下维度：

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

具体评估点：

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

技术解析

关键知识点

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

原理剖析

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

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

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

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

在setup中：

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

常见误区

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

问题解答

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

符合函数式编程范式，通过导入函数主动注册回调
支持同一生命周期注册多个处理函数
与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执行的逻辑
 }
}

可扩展性建议

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

深度追问

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

npm publish生命周期钩子

Wed, 05 Mar 2025 12:29:59 +0000

考察点分析

核心能力维度：包管理工具原理、自动化工程流程设计、npm脚本机制理解

技术评估点：

对npm生命周期钩子的执行顺序及触发时机的掌握
区分易混淆钩子（prepublish/prepublishOnly/prepack）
利用脚本自动化构建、测试、通知的工程化能力
对npm现代版本（v7+）最佳实践的认知
发布流程的安全把控（如前置校验）

技术解析

关键知识点

prepublishOnly > postpublish > prepare > 版本兼容性

原理剖析

执行npm publish时完整生命周期流程：

prepublish（已弃用）：在打包和安装时均触发（不推荐）
prepublishOnly：仅npm publish时触发，在打包之前执行（最佳实践：运行测试/构建）
prepack：npm pack前触发（打包.tgz前）
postpack：生成.tgz后触发
postpublish：包发布到registry后触发（适合通知/清理）

 # 典型执行流
npm publish
→ prepublishOnly
→ prepack → 生成包 → postpack
→ 上传到npm registry
→ postpublish

常见误区

混淆prepublish与prepublishOnly（后者仅发布时触发）
误将构建逻辑放在postpublish（此时已发布旧版代码）
未处理脚本执行失败导致错误发布

问题解答

执行npm publish时主要触发的生命周期钩子：

prepublishOnly：在打包前执行，用于构建和测试，确保发布内容可靠
postpublish：在包成功上传后执行，适用于通知或清理

自动化实践示例：

在prepublishOnly执行测试和构建，避免发布未编译代码
通过postpublish发送Slack/邮件通知，或自动生成版本日志
配合version钩子实现版本号更新时的文档自动化

解决方案

编码示例

 // package.json
{
 "scripts": {
 "build": "babel src -d lib",
 "test": "jest",
 "prepublishOnly": "npm run build && npm test", // 前置校验
 "postpublish": "node scripts/notify.js" // 发布后通知
 }
}

优化策略

前置校验：在prepublishOnly中加入安全检查（如漏洞扫描）
错误处理：添加|| exit 1确保脚本失败时终止发布
性能优化：缓存构建结果，避免重复编译

扩展建议

大流量场景：在postpublish中触发CDN预热
多环境适配：通过环境变量区分测试/正式发布流程

深度追问

如何阻止不符合条件的发布？

答：在prepublishOnly中添加版本/分支校验

钩子函数 on ZiYang FrontEnd Interview

组合式API生命周期变化

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

代码示例 link

可扩展性建议 link

深度追问 link

npm publish生命周期钩子

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

编码示例 link

优化策略 link

扩展建议 link

深度追问 link

如何阻止不符合条件的发布？ link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

代码示例

可扩展性建议

深度追问

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

编码示例

优化策略

扩展建议

深度追问

如何阻止不符合条件的发布？