Vue3 和 Vue2区别

Vue3 在 Vue2 的基础上进行了全面升级，主要区别体现在以下方面：

---

一、核心架构变化

1. 响应式原理

   • Vue2：基于 Object.defineProperty 实现响应式，无法检测对象属性的动态添加/删除，需通过 Vue.set 或 Vue.delete 处理。
   • Vue3：使用 Proxy 重构响应式系统，支持动态属性检测，无需额外 API，性能更好且支持 Map/Set 等数据结构。

2. Composition API

   • Vue2：使用 Options API（data、methods、computed 分块编写）。
   • Vue3：引入 Composition API（setup 函数），允许按逻辑功能组织代码，提升复杂组件的可维护性。

   // Vue3 Composition API 示例
   import { ref, reactive } from 'vue';
   export default {
     setup() {
       const count = ref(0);
       const state = reactive({ name: 'Vue3' });
       return { count, state };
     }
   }
   

---

二、性能优化

1. 虚拟 DOM 优化
   • 静态提升：检测静态节点并缓存，减少重复渲染。
   • Patch Flag：标记动态节点类型，仅对比动态内容。
2. Tree-shaking 支持：按需引入 API，减小打包体积（如未使用的功能不打包）。

---

三、新特性

1. Fragment：组件支持多根节点，无需包裹 <div>。
2. Teleport：将组件渲染到 DOM 任意位置（如全局弹窗）。

   <teleport to="#modal-container">
     <Modal />
   </teleport>
   

3. Suspense：优雅处理异步组件加载状态。

   <Suspense>
     <template #default><AsyncComponent /></template>
     <template #fallback><Loading /></template>
   </Suspense>
   

---

四、API 与语法变化

1. 生命周期钩子

   • beforeCreate → 使用 setup() 替代。
   • created → 使用 setup() 替代。
   • 其他钩子名称调整（如 beforeMount → onBeforeMount，需在 setup 中调用）。

   Vue2	Vue3 (Composition API)
   beforeCreate	setup()
   created	setup()
   beforeMount	onBeforeMount
   mounted	onMounted
   beforeUpdate	onBeforeUpdate
   updated	onUpdated
   beforeDestroy	onBeforeUnmount
   destroyed	onUnmounted

2. v-model 改进：支持多个 v-model，替代 Vue2 的 .sync。

   <!-- Vue3 -->
   <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
   

3. 全局 API 调整：Vue.createApp() 替代 new Vue()，避免全局配置污染。

---

五、其他关键区别

1. TypeScript 支持：Vue3 源码用 TypeScript 重写，提供更好的类型推断。
2. 移除过滤器（Filters）：推荐使用计算属性或方法替代。
3. 事件 API：$on、$off 等事件总线方法被移除，推荐使用 mitt 等库。
4. 自定义指令 API：生命周期钩子名称调整（如 bind → beforeMount）。

---

六、迁移建议

• 兼容性：Vue3 兼容大多数 Vue2 语法，但需注意废弃特性。
• 工具支持：使用 @vue/compat 迁移构建版本逐步升级。
• 官方指南：参考 Vue3 迁移指南。

---

总结

Vue3 在性能、代码组织和开发体验上均有显著提升，适合新项目或复杂度高的场景。对于老项目，建议评估迁移成本后逐步升级。