1. 项目概述为什么Vue3的Composition API与TypeScript是开发现代Web应用的基石如果你正在从Vue 2迁移到Vue 3或者准备用Vue 3启动一个新项目那么“生命周期”和“Setup语法糖”这两个概念绝对是你绕不开的核心。这不仅仅是两个新名词它们代表了Vue 3在开发范式上的一次深刻变革。过去在Vue 2的Options API中我们的代码被data、methods、computed、mounted等选项分割在不同的区域一个功能相关的逻辑可能散落在文件各处。当组件变得复杂时这种碎片化会显著降低代码的可读性和可维护性。Vue 3的Composition API特别是其核心setup函数以及更简洁的script setup语法糖正是为了解决这一问题而生。它允许我们将与同一个功能相关的所有逻辑状态、计算属性、方法、生命周期钩子聚合在一起形成更清晰、更易于复用的代码组织单元。而TypeScript的加入则为这场变革注入了强类型的安全保障。在Vue 2时代虽然也能用TypeScript但总有些“隔靴搔痒”的感觉类型推导往往不尽如人意。Vue 3从底层开始就使用TypeScript重写提供了顶级的TypeScript支持。这意味着你在setup中定义的响应式变量、函数参数、组件属性Props都能获得精确的类型推断和智能提示极大地减少了运行时错误提升了开发效率和大型项目的可维护性。因此掌握“Vue3生命周期在setup中的写法”以及“如何用script setup语法糖优雅地结合TypeScript”已经成为现代前端开发者尤其是中高级开发者必须精通的技能。这不仅是为了通过面试如热词中的“vue3面试题”更是为了在实际项目中写出更健壮、更易协作的代码。本文将带你彻底吃透这些概念通过大量代码截图和对比让你不仅能理解原理更能立刻上手实践。2. 核心概念深度解析从Options API到Composition API的思维转变在深入代码之前我们必须先建立正确的认知模型。Vue 2的Options API是一种“基于选项”的组织方式它像一份填空题要求你将代码填入data、methods、lifecycle hooks等预设的选项中。这种方式对于小型组件或初学者非常友好因为它结构固定一目了然。然而其弊端在于逻辑关注点的分离。想象一个组件需要处理“用户搜索”功能相关的数据搜索关键词、结果列表要放在data里搜索方法放在methods里初始化搜索可能要在mounted里监听输入框变化可能要用watch。这些属于同一功能的代码被物理位置分割当功能增多时阅读和维护代码就需要在文件里反复上下滚动这就是所谓的“碎片化”问题。Vue 3的Composition API则采用了“基于逻辑”的组织方式。它的核心是setup函数这是一个在组件创建之前执行的函数。在setup内部你可以像编写普通的JavaScript或TypeScript函数一样自由地声明变量、定义函数、调用生命周期钩子。你可以把处理“用户搜索”的所有逻辑都写在一起声明keyword和list响应式变量定义handleSearch函数在onMounted里执行初始化用watch监听keyword的变化。这样这个功能就形成了一个自包含的逻辑块。如果需要复用你甚至可以轻松地将这个逻辑块提取到一个独立的组合式函数Composable中这在Options API中是难以实现的。script setup语法糖则是将这个模式推向极致的语法增强。它是在单文件组件SFC中使用Composition API的编译时语法糖。简单来说写在script setup标签里的代码会被编译成setup函数的内容。这意味着你无需再显式地定义一个setup函数并返回一个对象代码更加简洁直观。同时它对TypeScript的支持是原生的类型推断更加完美。可以说script setup TypeScript是目前Vue 3单文件组件开发的首选和推荐写法。3. Vue 3生命周期全览与在Setup中的钩子函数映射生命周期是组件从创建、挂载、更新到销毁的完整过程。Vue 3的生命周期与Vue 2大体相似但有一些关键的重命名和新增。最重要的是在Composition API中所有生命周期钩子都需要从vue包中显式导入并以onXxx的函数形式在setup中调用。3.1 生命周期图谱与阶段解读一个Vue组件的完整生命周期可以分为以下几个主要阶段初始化阶段Initializationsetup函数在此阶段执行。这是Composition API的舞台用于建立响应式数据、计算属性、函数等。注意在setup内部你无法访问组件实例this因为此时组件实例尚未被完全创建。挂载阶段MountingonBeforeMount: 在组件挂载到DOM之前被调用。此时模板已经编译完成但尚未创建和插入DOM节点。onMounted: 组件挂载到DOM之后调用。这是执行依赖于DOM的操作如获取DOM元素引用、初始化第三方库最安全的地方。类似于Vue 2的mounted。更新阶段UpdatingonBeforeUpdate: 在响应式数据变化导致组件即将重新渲染和更新DOM之前调用。你可以在此访问更新前的DOM状态。onUpdated: 在组件因为响应式数据变化而更新DOM之后调用。警告在此钩子中修改状态可能导致无限更新循环通常用于执行依赖于更新后DOM的操作。卸载阶段UnmountingonBeforeUnmount: 在组件实例卸载之前调用。这是清理工作的理想位置例如清除定时器、取消事件监听、清理非Vue管理的DOM元素等。类似于Vue 2的beforeDestroy。onUnmounted: 组件实例卸载后调用。所有子组件也已被卸载。类似于Vue 2的destroyed。错误处理Error HandlingonErrorCaptured: 捕获来自后代组件的错误。可以在此钩子中处理错误或向上层传递。此外还有两个用于KeepAlive缓存组件的钩子onActivated和onDeactivated。3.2 Options API 与 Composition API 生命周期钩子对照表理解映射关系能帮助你快速从Vue 2过渡到Vue 3。Vue 2 (Options API)Vue 3 (Composition API)执行时机与说明beforeCreate无直接对应在Vue 3中setup函数替代了beforeCreate和created的功能。setup的执行时机就在它们之间。created无直接对应同上。响应式数据、计算属性等在setup中初始化。beforeMountonBeforeMount挂载前。mountedonMounted挂载后。beforeUpdateonBeforeUpdate更新前。updatedonUpdated更新后。beforeDestroyonBeforeUnmount销毁前。Vue 3采用了更准确的命名。destroyedonUnmounted销毁后。Vue 3采用了更准确的命名。errorCapturedonErrorCaptured错误捕获。activated(KeepAlive)onActivated被KeepAlive缓存的组件激活时。deactivated(KeepAlive)onDeactivated被KeepAlive缓存的组件失活时。实操心得从Vue 2迁移时最常犯的错误是在setup里寻找this。请牢记在setup中this是undefined。所有对组件上下文如Props、Slots、Emit的访问都需要通过setup函数的参数或特定的Composition API如getCurrentInstance但慎用来获取。4.script setup语法糖详解与TypeScript完美集成script setup是Vue 3.2版本正式推出的语法糖它让Composition API的书写体验达到了新的高度。它的目标是在单文件组件SFC中提供更简洁、更符合直觉的编码方式。4.1 基本用法与自动导出在script setup中任何顶层的绑定变量、函数声明、import导入都能直接在模板中使用无需通过return语句显式导出。!-- 不使用 script setup -- script langts import { defineComponent, ref } from vue; export default defineComponent({ setup() { const count ref(0); const increment () { count.value; }; // 必须显式返回 return { count, increment }; } }); /script !-- 使用 script setup -- script setup langts import { ref } from vue; // 顶层声明自动对模板可用 const count ref(0); const increment () { count.value; }; /script template button clickincrement{{ count }}/button /template可以看到代码量大幅减少结构更加清晰。所有在script setup顶层声明的响应式状态、函数、计算属性都会自动暴露给模板。4.2 核心特性Props、Emit、Slots与Expose的定义在script setup中我们使用一系列编译器宏Compiler Macros来定义组件的接口。这些宏在编译时会被正确处理无需导入。定义Props使用defineProps 这是与TypeScript集成最紧密的部分。你可以使用纯类型声明来定义props获得完整的类型推断。script setup langts // 方式一使用纯类型声明推荐 interface Props { title: string; count?: number; // 可选属性 items: string[]; } const props definePropsProps(); // 方式二使用运行时声明兼容性更好但类型支持稍弱 const props defineProps({ title: { type: String, required: true }, count: { type: Number, default: 0 }, items: { type: Array as PropTypestring[], required: true } }); // 在模板或逻辑中直接使用 props.title, props.count /script注意事项使用纯类型声明definePropsProps()时无法直接设置default默认值。如果需要默认值可以使用withDefaults编译器宏interface Props { title?: string; } const props withDefaults(definePropsProps(), { title: 默认标题 });定义Emit事件使用defineEmits 同样支持类型声明确保发出的事件及其载荷payload的类型安全。script setup langts // 方式一使用类型声明推荐 interface EmitEvents { (e: update:title, value: string): void; (e: submit, payload: { id: number; name: string }): void; } const emit defineEmitsEmitEvents(); // 方式二使用运行时声明 const emit defineEmits([update:title, submit]); const handleClick () { emit(update:title, 新的标题); emit(submit, { id: 1, name: Vue3 }); }; /script使用Slots和Attrs使用useSlots和useAttrs 这两个是罕见的需要在script setup中从vue导入的函数。script setup langts import { useSlots, useAttrs } from vue; const slots useSlots(); // 访问插槽内容 const attrs useAttrs(); // 访问所有非Props的属性如class, style, 原生事件 // 例如判断是否有默认插槽内容 const hasDefaultSlot slots.default; /script暴露组件实例方法使用defineExpose 默认情况下script setup的组件是“封闭”的父组件通过模板引用ref访问不到其内部声明的任何东西。使用defineExpose可以显式暴露。!-- Child.vue -- script setup langts import { ref } from vue; const internalState ref(内部数据); const publicMethod () { console.log(公共方法被调用); }; // 只有被暴露的才能被父组件访问 defineExpose({ publicMethod, internalState }); /script !-- Parent.vue -- script setup langts import { ref, onMounted } from vue; import Child from ./Child.vue; const childRef refInstanceTypetypeof Child(); onMounted(() { childRef.value?.publicMethod(); // 可以调用 console.log(childRef.value?.internalState); // 可以访问 }); /script template Child refchildRef / /template4.3 与TypeScript集成的优势script setup与TypeScript的结合几乎是天衣无缝的。上述的defineProps和defineEmits通过类型声明提供了端到端的类型安全。编辑器如VSCode能够提供精准的自动补全和类型错误提示。例如当你尝试给一个string类型的prop传递一个number时TypeScript会在编写阶段就报错。同样当你调用emit时编辑器会提示你事件名和载荷的类型极大减少了低级错误。5. 在Setup中使用生命周期钩子的实战代码解析现在让我们将生命周期钩子融入到script setup TypeScript的实际场景中。我们将创建一个模拟的“用户信息仪表板”组件它会在挂载时从API获取数据在数据更新时进行日志记录并在组件销毁时清理资源。5.1 组件实例用户信息仪表板!-- UserDashboard.vue -- script setup langts import { ref, onMounted, onBeforeUnmount, onUpdated, watch } from vue; // 1. 定义组件状态响应式数据 interface User { id: number; name: string; email: string; } const user refUser | null(null); const loading ref(false); const error refstring | null(null); // 一个需要清理的定时器ID let dataRefreshTimer: number | null null; // 2. 定义获取用户数据的函数 const fetchUserData async (userId: number) { loading.value true; error.value null; try { // 模拟API调用 await new Promise(resolve setTimeout(resolve, 500)); const mockData: User { id: userId, name: 用户${userId}, email: user${userId}example.com }; user.value mockData; console.log(用户数据已获取: ${mockData.name}); } catch (err) { error.value 获取用户数据失败; console.error(Fetch error:, err); } finally { loading.value false; } }; // 3. 使用生命周期钩子 // --- onMounted: 组件挂载后立即获取初始数据 --- onMounted(() { console.log(UserDashboard 组件已挂载到DOM); fetchUserData(1); // 获取初始用户 // 模拟一个需要清理的轮询任务实际中可能是WebSocket连接 dataRefreshTimer window.setInterval(() { console.log(模拟数据轮询...); // 在实际应用中这里可能会检查数据是否有更新 }, 10000); // 每10秒一次 }); // --- onUpdated: 数据更新后执行操作 --- onUpdated(() { // 注意避免在这里修改响应式状态可能导致无限循环 console.log(组件因响应式数据变化已完成DOM更新); if (user.value) { // 例如可以在这里执行依赖于最新DOM的第三方库更新 // updateThirdPartyChart(user.value); } }); // --- onBeforeUnmount: 组件销毁前清理资源 --- onBeforeUnmount(() { console.log(UserDashboard 组件即将销毁开始清理...); // 清除定时器防止内存泄漏 if (dataRefreshTimer) { window.clearInterval(dataRefreshTimer); dataRefreshTimer null; console.log(数据轮询定时器已清除); } // 其他清理工作如取消未完成的网络请求、移除全局事件监听器等 }); // 4. 使用watch来响应props变化假设有一个userId prop import { defineProps, withDefaults } from vue; interface Props { userId: number; } const props withDefaults(definePropsProps(), { userId: 1 }); // 监听userId prop的变化并重新获取数据 watch(() props.userId, (newId) { console.log(userId 变为 ${newId}重新获取数据); fetchUserData(newId); }, { immediate: true }); // immediate: true 表示在侦听器创建时立即执行一次 /script template div classdashboard h2用户信息仪表板/h2 div v-ifloading加载中.../div div v-else-iferror classerror{{ error }}/div div v-else-ifuser pstrongID:/strong {{ user.id }}/p pstrong姓名:/strong {{ user.name }}/p pstrong邮箱:/strong {{ user.email }}/p /div div v-else暂无用户数据/div /div /template style scoped .dashboard { padding: 20px; border: 1px solid #ccc; } .error { color: red; } /style5.2 代码逐段解析与核心要点状态定义使用ref和reactive本例用ref在setup顶层声明所有响应式状态。TypeScript接口User明确了数据的结构。业务逻辑fetchUserData是一个普通的异步函数它处理数据获取逻辑。注意它如何修改ref的值.value。生命周期钩子调用onMounted用于启动任务。这里我们获取初始数据并启动一个模拟的轮询定时器。这是发起网络请求、操作DOM、初始化第三方库的标准位置。onUpdated用于在DOM更新后执行操作。代码中的警告非常重要不要在这里同步修改触发更新的响应式数据否则会导致无限循环。它通常用于集成非响应式的DOM库。onBeforeUnmount用于清理。这是清除定时器、取消请求、移除事件监听器的关键位置是防止内存泄漏的生命线。响应Props变化我们使用defineProps定义了userId属性并用watch来监听它的变化。当父组件传入的userId改变时watch回调会触发重新获取对应用户的数据。{ immediate: true }选项确保在组件创建时也执行一次。模板模板部分与Options API几乎无异可以直接使用在script setup中声明的变量和函数。实操心得与避坑指南onMountedvscreated在Vue 2中我们常在created里发起请求。在Vue 3的setup中你可以在setup函数顶部或script setup顶层直接写异步调用但此时DOM还未挂载。如果操作依赖DOM务必放在onMounted中。清理工作至关重要onBeforeUnmount中忘记清理定时器、事件监听器或订阅是前端应用中常见的内存泄漏根源。养成“谁创建谁清理”的习惯。慎用onUpdated这个钩子容易被滥用。大多数情况下你应该使用计算属性computed或侦听器watch来响应数据变化而不是在onUpdated里检查。它的主要用途是处理Vue响应式系统之外的DOM更新。watch的灵活性示例中使用了watch的第一个参数为getter函数() props.userId这比直接watch(props, (newVal) {...})更精确后者会在props的任何属性变化时触发。对于引用类型可以使用deep选项。6. 高级模式与最佳实践掌握了基础用法后我们来看一些提升代码质量和开发效率的高级模式和最佳实践。6.1 组合式函数Composables封装生命周期逻辑组合式函数是Composition API的精髓它允许你将可复用的逻辑包含状态和生命周期提取到独立的函数中。例如我们可以将上面例子中的数据获取和清理逻辑封装起来。// useUserData.ts import { ref, onMounted, onBeforeUnmount } from vue; export function useUserData(userId: number) { const user refUser | null(null); const loading ref(false); const error refstring | null(null); let timer: number | null null; const fetchData async (id: number) { // ... 同前的fetchUserData逻辑 }; // 生命周期逻辑也封装在内 onMounted(() { fetchData(userId); timer window.setInterval(() console.log(轮询...), 10000); }); onBeforeUnmount(() { if (timer) window.clearInterval(timer); }); // 返回所有需要暴露给组件的状态和方法 return { user, loading, error, fetchData // 可选允许组件手动触发 }; }然后在组件中使用!-- UserDashboard.vue -- script setup langts import { useUserData } from ./useUserData; import { watch } from vue; interface Props { userId: number; } const props definePropsProps(); // 使用组合式函数逻辑清晰且可复用 const { user, loading, error } useUserData(props.userId); // 仍然可以监听props变化调用组合式函数内部的方法或重新初始化 watch(() props.userId, (newId) { // 这里可以调用 useUserData 返回的 fetchData 方法或者设计useUserData支持动态id }); /script这种方式将数据获取、状态管理和生命周期钩子完美地封装在一个独立的、可测试的单元中。6.2 异步组件与Suspense中的生命周期Vue 3支持使用defineAsyncComponent定义异步组件通常与Suspense组件配合使用。在异步组件中生命周期钩子的行为略有不同。!-- AsyncComponent.vue -- script setup langts import { onMounted } from vue; onMounted(() { console.log(异步组件挂载了); }); /script !-- Parent.vue -- script setup langts import { defineAsyncComponent } from vue; const AsyncComponent defineAsyncComponent(() import(./AsyncComponent.vue)); /script template Suspense template #default AsyncComponent / /template template #fallback 加载中... /template /Suspense /template在Suspense环境下异步组件的onMounted等生命周期钩子会在组件被成功加载并挂载后才会触发。而Suspense组件自身也有自己的生命周期事件如pending、resolve、fallback用于更精细地控制加载状态。6.3 性能优化避免不必要的重新渲染与钩子执行生命周期钩子尤其是onUpdated如果使用不当可能引发性能问题。优化onUpdated确保在onUpdated内的操作是必要的且尽可能轻量。考虑使用watch监听特定数据变化来替代在onUpdated中做复杂的检查。使用watchEffectvswatchwatchEffect会立即执行一次并自动追踪其回调函数内的响应式依赖。它适用于需要根据多个依赖项自动执行副作用的情况。但要注意如果依赖项很多且变化频繁可能会比精确的watch带来更多次执行。组件卸载时取消副作用除了定时器对于使用watch或watchEffect创建的侦听器如果它们在组件卸载后不应继续运行记得在onBeforeUnmount中手动停止watch返回一个停止函数。script setup langts import { watchEffect, onBeforeUnmount } from vue; const stopWatcher watchEffect(() { // 一些副作用... console.log(Effect running); }); onBeforeUnmount(() { stopWatcher(); // 重要在组件卸载时停止侦听器 }); /script7. 常见问题排查与实战技巧实录在实际开发中你可能会遇到一些典型问题。下面是一些常见场景及其解决方案。7.1 问题排查速查表问题现象可能原因解决方案模板中访问变量报错“未定义”1. 变量未在script setup顶层声明。2. 变量在setup()函数内声明但未返回。1. 确保变量/函数在script setup顶层直接声明。2. 如果使用非语法糖的setup()确保所有需要模板访问的变量都在返回对象中。onMounted中获取不到DOM元素ref绑定在元素上但访问时机过早。确保在onMounted钩子内部或之后访问DOM ref。setup函数执行时模板还未渲染。响应式数据更新了但视图不更新1. 直接修改了reactive对象的某个非响应式属性如从API赋值新对象覆盖。2. 修改了数组或对象但未触发Vue的侦测如通过索引改数组。1. 对于reactive确保修改其现有属性或使用Object.assign(reactiveObj, newObj)。2. 使用数组的变异方法push,splice或array.value newArray。对于对象使用Vue.setVue 3中较少用或直接赋值新对象。在script setup中访问this为undefinedscript setup中无组件实例this。使用setup函数参数props,context或特定的Composition API如getCurrentInstance谨慎使用来访问组件上下文。TypeScript类型报错defineProps找不到名称类型未导入或tsconfig.json配置问题。确保接口/类型已定义。检查Volar插件是否安装并启用。在tsconfig.json中确保types: [vue/global-dts]或正确配置了Vue类型。生命周期钩子被多次调用1. 组件被多次创建和销毁如v-if切换。2. 在setup中多次调用了同一个钩子函数。1. 这是正常行为确保清理逻辑在onBeforeUnmount中。2. 检查代码确保每个生命周期钩子只注册一次。watch或watchEffect在组件卸载后仍执行未在onBeforeUnmount中停止侦听器。保存watch或watchEffect返回的停止函数并在onBeforeUnmount中调用它。7.2 实战技巧封装一个带自动清理的useInterval钩子结合生命周期我们可以封装一个更安全的定时器钩子。// useInterval.ts import { onBeforeUnmount, ref } from vue; export function useInterval(callback: () void, delay: number | null) { const intervalId refnumber | null(null); const start () { if (delay ! null) { stop(); // 开始前先停止旧的 intervalId.value window.setInterval(callback, delay); } }; const stop () { if (intervalId.value ! null) { window.clearInterval(intervalId.value); intervalId.value null; } }; // 组件卸载时自动清理 onBeforeUnmount(stop); return { start, stop, intervalId }; }在组件中使用script setup langts import { useInterval } from ./useInterval; const { start, stop } useInterval(() { console.log(定时任务执行); }, 1000); // 可以根据需要手动控制 const handleStart () start(); const handleStop () stop(); /script这个技巧确保了定时器资源一定会被清理无论组件以何种方式卸载。7.3 关于getCurrentInstance的谨慎使用在极少数情况下你可能需要在setup中访问组件实例的内部属性这时会用到getCurrentInstance。但官方不推荐在应用代码中频繁使用它因为它主要服务于库开发者且其返回的实例在服务端渲染SSR环境下行为不同。import { getCurrentInstance } from vue; // 不推荐常规使用 const instance getCurrentInstance(); // instance.ctx 包含了模板中可访问的属性开发环境 // instance.proxy 是组件实例的代理类似于 this绝大多数需求如访问根实例、使用插件如this.$router都有更好的Composition API替代方案如useRouterfromvue-router。
Vue3 Composition API生命周期钩子与＜script setup＞ TypeScript实战指南
1. 项目概述为什么Vue3的Composition API与TypeScript是开发现代Web应用的基石如果你正在从Vue 2迁移到Vue 3或者准备用Vue 3启动一个新项目那么“生命周期”和“Setup语法糖”这两个概念绝对是你绕不开的核心。这不仅仅是两个新名词它们代表了Vue 3在开发范式上的一次深刻变革。过去在Vue 2的Options API中我们的代码被data、methods、computed、mounted等选项分割在不同的区域一个功能相关的逻辑可能散落在文件各处。当组件变得复杂时这种碎片化会显著降低代码的可读性和可维护性。Vue 3的Composition API特别是其核心setup函数以及更简洁的script setup语法糖正是为了解决这一问题而生。它允许我们将与同一个功能相关的所有逻辑状态、计算属性、方法、生命周期钩子聚合在一起形成更清晰、更易于复用的代码组织单元。而TypeScript的加入则为这场变革注入了强类型的安全保障。在Vue 2时代虽然也能用TypeScript但总有些“隔靴搔痒”的感觉类型推导往往不尽如人意。Vue 3从底层开始就使用TypeScript重写提供了顶级的TypeScript支持。这意味着你在setup中定义的响应式变量、函数参数、组件属性Props都能获得精确的类型推断和智能提示极大地减少了运行时错误提升了开发效率和大型项目的可维护性。因此掌握“Vue3生命周期在setup中的写法”以及“如何用script setup语法糖优雅地结合TypeScript”已经成为现代前端开发者尤其是中高级开发者必须精通的技能。这不仅是为了通过面试如热词中的“vue3面试题”更是为了在实际项目中写出更健壮、更易协作的代码。本文将带你彻底吃透这些概念通过大量代码截图和对比让你不仅能理解原理更能立刻上手实践。2. 核心概念深度解析从Options API到Composition API的思维转变在深入代码之前我们必须先建立正确的认知模型。Vue 2的Options API是一种“基于选项”的组织方式它像一份填空题要求你将代码填入data、methods、lifecycle hooks等预设的选项中。这种方式对于小型组件或初学者非常友好因为它结构固定一目了然。然而其弊端在于逻辑关注点的分离。想象一个组件需要处理“用户搜索”功能相关的数据搜索关键词、结果列表要放在data里搜索方法放在methods里初始化搜索可能要在mounted里监听输入框变化可能要用watch。这些属于同一功能的代码被物理位置分割当功能增多时阅读和维护代码就需要在文件里反复上下滚动这就是所谓的“碎片化”问题。Vue 3的Composition API则采用了“基于逻辑”的组织方式。它的核心是setup函数这是一个在组件创建之前执行的函数。在setup内部你可以像编写普通的JavaScript或TypeScript函数一样自由地声明变量、定义函数、调用生命周期钩子。你可以把处理“用户搜索”的所有逻辑都写在一起声明keyword和list响应式变量定义handleSearch函数在onMounted里执行初始化用watch监听keyword的变化。这样这个功能就形成了一个自包含的逻辑块。如果需要复用你甚至可以轻松地将这个逻辑块提取到一个独立的组合式函数Composable中这在Options API中是难以实现的。script setup语法糖则是将这个模式推向极致的语法增强。它是在单文件组件SFC中使用Composition API的编译时语法糖。简单来说写在script setup标签里的代码会被编译成setup函数的内容。这意味着你无需再显式地定义一个setup函数并返回一个对象代码更加简洁直观。同时它对TypeScript的支持是原生的类型推断更加完美。可以说script setup TypeScript是目前Vue 3单文件组件开发的首选和推荐写法。3. Vue 3生命周期全览与在Setup中的钩子函数映射生命周期是组件从创建、挂载、更新到销毁的完整过程。Vue 3的生命周期与Vue 2大体相似但有一些关键的重命名和新增。最重要的是在Composition API中所有生命周期钩子都需要从vue包中显式导入并以onXxx的函数形式在setup中调用。3.1 生命周期图谱与阶段解读一个Vue组件的完整生命周期可以分为以下几个主要阶段初始化阶段Initializationsetup函数在此阶段执行。这是Composition API的舞台用于建立响应式数据、计算属性、函数等。注意在setup内部你无法访问组件实例this因为此时组件实例尚未被完全创建。挂载阶段MountingonBeforeMount: 在组件挂载到DOM之前被调用。此时模板已经编译完成但尚未创建和插入DOM节点。onMounted: 组件挂载到DOM之后调用。这是执行依赖于DOM的操作如获取DOM元素引用、初始化第三方库最安全的地方。类似于Vue 2的mounted。更新阶段UpdatingonBeforeUpdate: 在响应式数据变化导致组件即将重新渲染和更新DOM之前调用。你可以在此访问更新前的DOM状态。onUpdated: 在组件因为响应式数据变化而更新DOM之后调用。警告在此钩子中修改状态可能导致无限更新循环通常用于执行依赖于更新后DOM的操作。卸载阶段UnmountingonBeforeUnmount: 在组件实例卸载之前调用。这是清理工作的理想位置例如清除定时器、取消事件监听、清理非Vue管理的DOM元素等。类似于Vue 2的beforeDestroy。onUnmounted: 组件实例卸载后调用。所有子组件也已被卸载。类似于Vue 2的destroyed。错误处理Error HandlingonErrorCaptured: 捕获来自后代组件的错误。可以在此钩子中处理错误或向上层传递。此外还有两个用于KeepAlive缓存组件的钩子onActivated和onDeactivated。3.2 Options API 与 Composition API 生命周期钩子对照表理解映射关系能帮助你快速从Vue 2过渡到Vue 3。Vue 2 (Options API)Vue 3 (Composition API)执行时机与说明beforeCreate无直接对应在Vue 3中setup函数替代了beforeCreate和created的功能。setup的执行时机就在它们之间。created无直接对应同上。响应式数据、计算属性等在setup中初始化。beforeMountonBeforeMount挂载前。mountedonMounted挂载后。beforeUpdateonBeforeUpdate更新前。updatedonUpdated更新后。beforeDestroyonBeforeUnmount销毁前。Vue 3采用了更准确的命名。destroyedonUnmounted销毁后。Vue 3采用了更准确的命名。errorCapturedonErrorCaptured错误捕获。activated(KeepAlive)onActivated被KeepAlive缓存的组件激活时。deactivated(KeepAlive)onDeactivated被KeepAlive缓存的组件失活时。实操心得从Vue 2迁移时最常犯的错误是在setup里寻找this。请牢记在setup中this是undefined。所有对组件上下文如Props、Slots、Emit的访问都需要通过setup函数的参数或特定的Composition API如getCurrentInstance但慎用来获取。4.script setup语法糖详解与TypeScript完美集成script setup是Vue 3.2版本正式推出的语法糖它让Composition API的书写体验达到了新的高度。它的目标是在单文件组件SFC中提供更简洁、更符合直觉的编码方式。4.1 基本用法与自动导出在script setup中任何顶层的绑定变量、函数声明、import导入都能直接在模板中使用无需通过return语句显式导出。!-- 不使用 script setup -- script langts import { defineComponent, ref } from vue; export default defineComponent({ setup() { const count ref(0); const increment () { count.value; }; // 必须显式返回 return { count, increment }; } }); /script !-- 使用 script setup -- script setup langts import { ref } from vue; // 顶层声明自动对模板可用 const count ref(0); const increment () { count.value; }; /script template button clickincrement{{ count }}/button /template可以看到代码量大幅减少结构更加清晰。所有在script setup顶层声明的响应式状态、函数、计算属性都会自动暴露给模板。4.2 核心特性Props、Emit、Slots与Expose的定义在script setup中我们使用一系列编译器宏Compiler Macros来定义组件的接口。这些宏在编译时会被正确处理无需导入。定义Props使用defineProps 这是与TypeScript集成最紧密的部分。你可以使用纯类型声明来定义props获得完整的类型推断。script setup langts // 方式一使用纯类型声明推荐 interface Props { title: string; count?: number; // 可选属性 items: string[]; } const props definePropsProps(); // 方式二使用运行时声明兼容性更好但类型支持稍弱 const props defineProps({ title: { type: String, required: true }, count: { type: Number, default: 0 }, items: { type: Array as PropTypestring[], required: true } }); // 在模板或逻辑中直接使用 props.title, props.count /script注意事项使用纯类型声明definePropsProps()时无法直接设置default默认值。如果需要默认值可以使用withDefaults编译器宏interface Props { title?: string; } const props withDefaults(definePropsProps(), { title: 默认标题 });定义Emit事件使用defineEmits 同样支持类型声明确保发出的事件及其载荷payload的类型安全。script setup langts // 方式一使用类型声明推荐 interface EmitEvents { (e: update:title, value: string): void; (e: submit, payload: { id: number; name: string }): void; } const emit defineEmitsEmitEvents(); // 方式二使用运行时声明 const emit defineEmits([update:title, submit]); const handleClick () { emit(update:title, 新的标题); emit(submit, { id: 1, name: Vue3 }); }; /script使用Slots和Attrs使用useSlots和useAttrs 这两个是罕见的需要在script setup中从vue导入的函数。script setup langts import { useSlots, useAttrs } from vue; const slots useSlots(); // 访问插槽内容 const attrs useAttrs(); // 访问所有非Props的属性如class, style, 原生事件 // 例如判断是否有默认插槽内容 const hasDefaultSlot slots.default; /script暴露组件实例方法使用defineExpose 默认情况下script setup的组件是“封闭”的父组件通过模板引用ref访问不到其内部声明的任何东西。使用defineExpose可以显式暴露。!-- Child.vue -- script setup langts import { ref } from vue; const internalState ref(内部数据); const publicMethod () { console.log(公共方法被调用); }; // 只有被暴露的才能被父组件访问 defineExpose({ publicMethod, internalState }); /script !-- Parent.vue -- script setup langts import { ref, onMounted } from vue; import Child from ./Child.vue; const childRef refInstanceTypetypeof Child(); onMounted(() { childRef.value?.publicMethod(); // 可以调用 console.log(childRef.value?.internalState); // 可以访问 }); /script template Child refchildRef / /template4.3 与TypeScript集成的优势script setup与TypeScript的结合几乎是天衣无缝的。上述的defineProps和defineEmits通过类型声明提供了端到端的类型安全。编辑器如VSCode能够提供精准的自动补全和类型错误提示。例如当你尝试给一个string类型的prop传递一个number时TypeScript会在编写阶段就报错。同样当你调用emit时编辑器会提示你事件名和载荷的类型极大减少了低级错误。5. 在Setup中使用生命周期钩子的实战代码解析现在让我们将生命周期钩子融入到script setup TypeScript的实际场景中。我们将创建一个模拟的“用户信息仪表板”组件它会在挂载时从API获取数据在数据更新时进行日志记录并在组件销毁时清理资源。5.1 组件实例用户信息仪表板!-- UserDashboard.vue -- script setup langts import { ref, onMounted, onBeforeUnmount, onUpdated, watch } from vue; // 1. 定义组件状态响应式数据 interface User { id: number; name: string; email: string; } const user refUser | null(null); const loading ref(false); const error refstring | null(null); // 一个需要清理的定时器ID let dataRefreshTimer: number | null null; // 2. 定义获取用户数据的函数 const fetchUserData async (userId: number) { loading.value true; error.value null; try { // 模拟API调用 await new Promise(resolve setTimeout(resolve, 500)); const mockData: User { id: userId, name: 用户${userId}, email: user${userId}example.com }; user.value mockData; console.log(用户数据已获取: ${mockData.name}); } catch (err) { error.value 获取用户数据失败; console.error(Fetch error:, err); } finally { loading.value false; } }; // 3. 使用生命周期钩子 // --- onMounted: 组件挂载后立即获取初始数据 --- onMounted(() { console.log(UserDashboard 组件已挂载到DOM); fetchUserData(1); // 获取初始用户 // 模拟一个需要清理的轮询任务实际中可能是WebSocket连接 dataRefreshTimer window.setInterval(() { console.log(模拟数据轮询...); // 在实际应用中这里可能会检查数据是否有更新 }, 10000); // 每10秒一次 }); // --- onUpdated: 数据更新后执行操作 --- onUpdated(() { // 注意避免在这里修改响应式状态可能导致无限循环 console.log(组件因响应式数据变化已完成DOM更新); if (user.value) { // 例如可以在这里执行依赖于最新DOM的第三方库更新 // updateThirdPartyChart(user.value); } }); // --- onBeforeUnmount: 组件销毁前清理资源 --- onBeforeUnmount(() { console.log(UserDashboard 组件即将销毁开始清理...); // 清除定时器防止内存泄漏 if (dataRefreshTimer) { window.clearInterval(dataRefreshTimer); dataRefreshTimer null; console.log(数据轮询定时器已清除); } // 其他清理工作如取消未完成的网络请求、移除全局事件监听器等 }); // 4. 使用watch来响应props变化假设有一个userId prop import { defineProps, withDefaults } from vue; interface Props { userId: number; } const props withDefaults(definePropsProps(), { userId: 1 }); // 监听userId prop的变化并重新获取数据 watch(() props.userId, (newId) { console.log(userId 变为 ${newId}重新获取数据); fetchUserData(newId); }, { immediate: true }); // immediate: true 表示在侦听器创建时立即执行一次 /script template div classdashboard h2用户信息仪表板/h2 div v-ifloading加载中.../div div v-else-iferror classerror{{ error }}/div div v-else-ifuser pstrongID:/strong {{ user.id }}/p pstrong姓名:/strong {{ user.name }}/p pstrong邮箱:/strong {{ user.email }}/p /div div v-else暂无用户数据/div /div /template style scoped .dashboard { padding: 20px; border: 1px solid #ccc; } .error { color: red; } /style5.2 代码逐段解析与核心要点状态定义使用ref和reactive本例用ref在setup顶层声明所有响应式状态。TypeScript接口User明确了数据的结构。业务逻辑fetchUserData是一个普通的异步函数它处理数据获取逻辑。注意它如何修改ref的值.value。生命周期钩子调用onMounted用于启动任务。这里我们获取初始数据并启动一个模拟的轮询定时器。这是发起网络请求、操作DOM、初始化第三方库的标准位置。onUpdated用于在DOM更新后执行操作。代码中的警告非常重要不要在这里同步修改触发更新的响应式数据否则会导致无限循环。它通常用于集成非响应式的DOM库。onBeforeUnmount用于清理。这是清除定时器、取消请求、移除事件监听器的关键位置是防止内存泄漏的生命线。响应Props变化我们使用defineProps定义了userId属性并用watch来监听它的变化。当父组件传入的userId改变时watch回调会触发重新获取对应用户的数据。{ immediate: true }选项确保在组件创建时也执行一次。模板模板部分与Options API几乎无异可以直接使用在script setup中声明的变量和函数。实操心得与避坑指南onMountedvscreated在Vue 2中我们常在created里发起请求。在Vue 3的setup中你可以在setup函数顶部或script setup顶层直接写异步调用但此时DOM还未挂载。如果操作依赖DOM务必放在onMounted中。清理工作至关重要onBeforeUnmount中忘记清理定时器、事件监听器或订阅是前端应用中常见的内存泄漏根源。养成“谁创建谁清理”的习惯。慎用onUpdated这个钩子容易被滥用。大多数情况下你应该使用计算属性computed或侦听器watch来响应数据变化而不是在onUpdated里检查。它的主要用途是处理Vue响应式系统之外的DOM更新。watch的灵活性示例中使用了watch的第一个参数为getter函数() props.userId这比直接watch(props, (newVal) {...})更精确后者会在props的任何属性变化时触发。对于引用类型可以使用deep选项。6. 高级模式与最佳实践掌握了基础用法后我们来看一些提升代码质量和开发效率的高级模式和最佳实践。6.1 组合式函数Composables封装生命周期逻辑组合式函数是Composition API的精髓它允许你将可复用的逻辑包含状态和生命周期提取到独立的函数中。例如我们可以将上面例子中的数据获取和清理逻辑封装起来。// useUserData.ts import { ref, onMounted, onBeforeUnmount } from vue; export function useUserData(userId: number) { const user refUser | null(null); const loading ref(false); const error refstring | null(null); let timer: number | null null; const fetchData async (id: number) { // ... 同前的fetchUserData逻辑 }; // 生命周期逻辑也封装在内 onMounted(() { fetchData(userId); timer window.setInterval(() console.log(轮询...), 10000); }); onBeforeUnmount(() { if (timer) window.clearInterval(timer); }); // 返回所有需要暴露给组件的状态和方法 return { user, loading, error, fetchData // 可选允许组件手动触发 }; }然后在组件中使用!-- UserDashboard.vue -- script setup langts import { useUserData } from ./useUserData; import { watch } from vue; interface Props { userId: number; } const props definePropsProps(); // 使用组合式函数逻辑清晰且可复用 const { user, loading, error } useUserData(props.userId); // 仍然可以监听props变化调用组合式函数内部的方法或重新初始化 watch(() props.userId, (newId) { // 这里可以调用 useUserData 返回的 fetchData 方法或者设计useUserData支持动态id }); /script这种方式将数据获取、状态管理和生命周期钩子完美地封装在一个独立的、可测试的单元中。6.2 异步组件与Suspense中的生命周期Vue 3支持使用defineAsyncComponent定义异步组件通常与Suspense组件配合使用。在异步组件中生命周期钩子的行为略有不同。!-- AsyncComponent.vue -- script setup langts import { onMounted } from vue; onMounted(() { console.log(异步组件挂载了); }); /script !-- Parent.vue -- script setup langts import { defineAsyncComponent } from vue; const AsyncComponent defineAsyncComponent(() import(./AsyncComponent.vue)); /script template Suspense template #default AsyncComponent / /template template #fallback 加载中... /template /Suspense /template在Suspense环境下异步组件的onMounted等生命周期钩子会在组件被成功加载并挂载后才会触发。而Suspense组件自身也有自己的生命周期事件如pending、resolve、fallback用于更精细地控制加载状态。6.3 性能优化避免不必要的重新渲染与钩子执行生命周期钩子尤其是onUpdated如果使用不当可能引发性能问题。优化onUpdated确保在onUpdated内的操作是必要的且尽可能轻量。考虑使用watch监听特定数据变化来替代在onUpdated中做复杂的检查。使用watchEffectvswatchwatchEffect会立即执行一次并自动追踪其回调函数内的响应式依赖。它适用于需要根据多个依赖项自动执行副作用的情况。但要注意如果依赖项很多且变化频繁可能会比精确的watch带来更多次执行。组件卸载时取消副作用除了定时器对于使用watch或watchEffect创建的侦听器如果它们在组件卸载后不应继续运行记得在onBeforeUnmount中手动停止watch返回一个停止函数。script setup langts import { watchEffect, onBeforeUnmount } from vue; const stopWatcher watchEffect(() { // 一些副作用... console.log(Effect running); }); onBeforeUnmount(() { stopWatcher(); // 重要在组件卸载时停止侦听器 }); /script7. 常见问题排查与实战技巧实录在实际开发中你可能会遇到一些典型问题。下面是一些常见场景及其解决方案。7.1 问题排查速查表问题现象可能原因解决方案模板中访问变量报错“未定义”1. 变量未在script setup顶层声明。2. 变量在setup()函数内声明但未返回。1. 确保变量/函数在script setup顶层直接声明。2. 如果使用非语法糖的setup()确保所有需要模板访问的变量都在返回对象中。onMounted中获取不到DOM元素ref绑定在元素上但访问时机过早。确保在onMounted钩子内部或之后访问DOM ref。setup函数执行时模板还未渲染。响应式数据更新了但视图不更新1. 直接修改了reactive对象的某个非响应式属性如从API赋值新对象覆盖。2. 修改了数组或对象但未触发Vue的侦测如通过索引改数组。1. 对于reactive确保修改其现有属性或使用Object.assign(reactiveObj, newObj)。2. 使用数组的变异方法push,splice或array.value newArray。对于对象使用Vue.setVue 3中较少用或直接赋值新对象。在script setup中访问this为undefinedscript setup中无组件实例this。使用setup函数参数props,context或特定的Composition API如getCurrentInstance谨慎使用来访问组件上下文。TypeScript类型报错defineProps找不到名称类型未导入或tsconfig.json配置问题。确保接口/类型已定义。检查Volar插件是否安装并启用。在tsconfig.json中确保types: [vue/global-dts]或正确配置了Vue类型。生命周期钩子被多次调用1. 组件被多次创建和销毁如v-if切换。2. 在setup中多次调用了同一个钩子函数。1. 这是正常行为确保清理逻辑在onBeforeUnmount中。2. 检查代码确保每个生命周期钩子只注册一次。watch或watchEffect在组件卸载后仍执行未在onBeforeUnmount中停止侦听器。保存watch或watchEffect返回的停止函数并在onBeforeUnmount中调用它。7.2 实战技巧封装一个带自动清理的useInterval钩子结合生命周期我们可以封装一个更安全的定时器钩子。// useInterval.ts import { onBeforeUnmount, ref } from vue; export function useInterval(callback: () void, delay: number | null) { const intervalId refnumber | null(null); const start () { if (delay ! null) { stop(); // 开始前先停止旧的 intervalId.value window.setInterval(callback, delay); } }; const stop () { if (intervalId.value ! null) { window.clearInterval(intervalId.value); intervalId.value null; } }; // 组件卸载时自动清理 onBeforeUnmount(stop); return { start, stop, intervalId }; }在组件中使用script setup langts import { useInterval } from ./useInterval; const { start, stop } useInterval(() { console.log(定时任务执行); }, 1000); // 可以根据需要手动控制 const handleStart () start(); const handleStop () stop(); /script这个技巧确保了定时器资源一定会被清理无论组件以何种方式卸载。7.3 关于getCurrentInstance的谨慎使用在极少数情况下你可能需要在setup中访问组件实例的内部属性这时会用到getCurrentInstance。但官方不推荐在应用代码中频繁使用它因为它主要服务于库开发者且其返回的实例在服务端渲染SSR环境下行为不同。import { getCurrentInstance } from vue; // 不推荐常规使用 const instance getCurrentInstance(); // instance.ctx 包含了模板中可访问的属性开发环境 // instance.proxy 是组件实例的代理类似于 this绝大多数需求如访问根实例、使用插件如this.$router都有更好的Composition API替代方案如useRouterfromvue-router。
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
