Vue2 和 Vue3 的核心区别
1. 响应式原理：从「手动挡」到「自动挡」
-
Vue2：
使用Object.defineProperty监听数据变化，但无法检测新增属性和数组索引修改，需要借助Vue.set。// Vue2 中修改数组元素不会触发视图更新 this.list[0] = '新值'; // ❌ 不生效 this.$set(this.list, 0, '新值'); // ✅ 生效 -
Vue3：
使用Proxy实现响应式，自动支持所有数据变化类型。// Vue3 中直接修改即可 list.value[0] = '新值'; // ✅ 自动触发更新
比喻：
Vue2 像手动挡车，需要换挡（Vue.set）才能提速；Vue3 是自动挡，直接踩油门就能跑。
2. 代码组织方式：从「分柜子」到「自由组合」
-
Vue2（Options API）：
需要将代码拆分到data、methods、computed等选项中，逻辑分散。// Vue2：数据和方法分散 export default {data() { return { count: 0 } },methods: { increment() { this.count++ } } } -
Vue3（Composition API）：
使用setup函数，按逻辑功能组织代码（类似 React Hooks）。// Vue3：相关逻辑写在一起 import { ref } from 'vue'; export default {setup() {const count = ref(0);const increment = () => { count.value++ };return { count, increment };} }
比喻：
Vue2 像把衣服、裤子、袜子分开放不同抽屉；Vue3 像按季节搭配好套装，方便取用。
3. 生命周期：名称更直观
| 功能 | Vue2 钩子 | Vue3 钩子 |
|---|---|---|
| 组件挂载前 | beforeCreate | setup() 替代 |
| 组件挂载完成 | mounted | onMounted |
| 组件销毁前 | beforeDestroy | onBeforeUnmount |
| 组件销毁后 | destroyed | onUnmounted |
示例：
// Vue3 使用生命周期钩子
import { onMounted } from 'vue';
export default {setup() {onMounted(() => {console.log('组件挂载完成！');});}
}
4. 性能优化：更快更轻量
- 打包体积：Vue3 核心库比 Vue2 小 40%。
- 渲染速度：Vue3 的虚拟 DOM 算法优化，更新速度提升 100%。
- Tree-shaking：Vue3 支持按需引入功能，未使用的代码不会打包进项目。
比喻：
Vue2 像装满工具的卡车，Vue3 像只带必需工具的跑车，更快更灵活。
5. 新特性：解决痛点问题
多个根元素（Fragment）
<!-- Vue2：必须有单个根元素 -->
<template><div><h1>标题</h1><p>内容</p></div>
</template><!-- Vue3：允许多个根元素 -->
<template><h1>标题</h1><p>内容</p>
</template>
Teleport（传送门）
将组件渲染到任意 DOM 节点（如全局弹窗）：
<template><teleport to="#modal-container"><div class="modal">我是一个弹窗</div></teleport>
</template>
总结：Vue2 vs Vue3 如何选择？
- Vue2：适合维护旧项目或对兼容性要求高的场景。
- Vue3：推荐新项目使用，性能更好、代码更灵活、生态完善（如 Pinia、Vite）。
升级建议：
- 小型项目：直接重写为 Vue3。
- 大型项目：逐步迁移，使用
@vue/compat兼容模式过渡。