vue3与vue2的差异
2024年3月21日大约 2 分钟
vue3与vue2的差异
Vue2 主要采用选项式 API，Vue3 更强调组合式 API。组合式 API 在复杂业务中通常具备更好的逻辑组织能力与复用能力。
关于生命周期，Vue3 与 Vue2 的对比如下：
Vue3 引入了 setup 入口，beforeCreate/create 阶段的核心逻辑通常会在 setup 中完成，不再以同名生命周期显式暴露。
| vue2 | vue3 |
|---|---|
| beforeCreate | |
| create | |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
其次，Vue2 中状态通常集中在 data 中定义；Vue3 可以在 setup 内按功能模块拆分状态与副作用，结构更清晰。
数据的响应式原理
Vue2 中采用 Object.defineProperty 对数据进行劫持。
这里存在的弊端是无法监听对象或数组的增删。
Vue3 则采用 Proxy 与 Reflect 构建响应式代理能力。
Vue3 对于TS有更好的支持。
Teleport 和 Suspense 组件： Vue3 引入 Teleport 用于灵活控制组件挂载位置，引入 Suspense 处理异步组件的加载状态。
此外，Vue3 还补充了更多面向工程实践的 API，便于在复杂场景下构建可维护的组件体系。
背景
「vue3与vue2的差异」属于框架机制类主题，价值在于指导实际架构决策，而不是停留在 API 对比。
核心原理
建议从三层理解框架：编译期生成什么、运行时如何调度、更新阶段如何控制复杂度。
实现方式 / 示例
把机制映射到业务问题：组件粒度划分、状态归属边界、列表更新策略、异步渲染时机。
常见问题
- 只讨论语法差异，忽略调度模型差异。
- 性能问题归因笼统，缺少可观测数据。
- 对比结论缺乏适用场景，难以指导选型。
最佳实践
对每个结论补充“适用场景、成本、替代方案”，把知识沉淀为可执行的选型标准。
总结
围绕「vue3与vue2的差异」的关键是把框架认知转化为工程决策能力。