vue 3 已移除函数式组件，因其无实例、无状态、不触发生命周期钩子；vue 2 中需手动管理副作用，vue 3 改用 setup + 生命周期钩子精准控制。
Vue 函数式组件（Functional Component）在 Vue 2 中存在，但在 Vue 3 中已被移除——这是生命周期处理差异的根本前提。函数式组件本身没有实例、不维护状态、不触发常规生命周期钩子，因此它的“生命周期”本质上是渲染函数的执行周期，而非组件实例的完整生命周期。
Vue 2 中函数式组件的生命周期特点
Vue 2 支持通过 functional: true 声明函数式组件，它不创建 Vue 实例，因而：
- 不会执行 beforeCreate、created、mounted 等任何 Options API 生命周期钩子
- 没有
this上下文，无法访问data、methods、$refs或$el - 渲染完全依赖传入的 context（含 props、slots、attrs、listeners），逻辑必须写在
render(h, ctx)函数内 - 若需副作用（如 DOM 操作、定时器），只能在
render中手动执行，且需自行管理清理（无beforeDestroy可用）
Vue 3 中已移除函数式组件
Vue 3 不再支持 functional 选项，也不提供对应的渲染函数签名。取而代之的是：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 所有组件默认为有状态组件，即使只做渲染，也拥有完整的生命周期
- 若追求轻量，可使用纯 setup() + 渲染函数 的组合式写法，但仍会触发 onMounted、onUnmounted 等钩子
- 需要手动控制副作用时，应使用 onMounted / onUnmounted 配对清理，而不是依赖函数式组件的“无生命周期”假象
替代方案与实践建议
当原本想用函数式组件实现无状态渲染或性能优化时，更推荐：
- 用普通组件 + defineComponent({ setup() { return () => h('div', props.msg) } }) 写法，保留生命周期可控性
- 对简单 UI 片段，直接使用 渲染函数 或 JSX，但始终在
setup中注册必要的生命周期钩子 - 避免在渲染函数中直接操作 DOM 或启动定时器；改用
onMounted初始化、onUnmounted清理 - 若组件仅用于展示且无交互，可考虑提取为独立的工具函数或 Composable，而非组件
函数式组件的消失不是功能倒退，而是让生命周期行为更统一、副作用更可预测。真正需要的不是“跳过生命周期”，而是“在正确时机精准控制副作用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
