vue2 和vue3 使用区别，完整使用区别示例对比汇总

以下是结合最新实践及官方文档整理的 Vue2 与 Vue3 完整使用区别对比，涵盖核心差异点及典型示例：

一、响应式系统本质差异

1. 底层实现机制

版本	实现方式	特点	局限
Vue2	Object.defineProperty	仅能劫持已存在的属性	❌新增属性/删除属性无响应式 ❌数组索引直接修改需特殊处理
Vue3	Proxy + Reflect	代理整个对象，支持动态属性增减、数组索引直接修改	✅自动追踪所有属性变化

示例对比：

// Vue2: 动态添加属性不触发视图更新
this.someObject.newProp = 'value'; // 无效！
// 解决方案：Vue.set(this.someObject, 'newProp', 'value');

// Vue3: 直接赋值即可触发更新
const state = reactive({ count: 0 });
state.newProperty = 'value'; // ✅自动触发视图更新

二、API 设计风格演变

1. Options API（Vue2 主流） vs Composition API（Vue3 推荐）

特性	Vue2 Options API	Vue3 Composition API
代码组织方式	按功能模块划分（data/methods/computed）	按业务逻辑聚合
数据访问	this.xxx	ref().value / reactive().xxx
复用性	依赖 Mixin 易产生命名冲突	自定义 Hook（如 useCounter）可灵活复用
TypeScript 支持	需额外配置	原生支持，类型推导完善

完整示例对比：

<!-- Vue2 计数器组件 -->
export default {
  data() { return { count: 0 } },
  methods: {
    increment() { this.count++ }
  },
  computed: {
    doubleCount() { return this.count * 2 }
  },
  watch: {
    count(newVal) { console.log('Count changed:', newVal) }
  }
}

<!-- Vue3 组合式写法 -->
<script setup>
import { ref, computed, watch } from 'vue'
const count = ref(0)
const increment = () => count.value++
const doubleCount = computed(() => count.value * 2)
watch(count, (newVal) => console.log('Count changed:', newVal))
</script>

三、生命周期钩子重构

生命周期阶段	Vue2 钩子名称	Vue3 钩子名称	说明
创建前	beforeCreate	-	➡️ 逻辑移至 setup()
创建后	created	-	➡️ 逻辑移至 setup()
挂载前	beforeMount	onBeforeMount	需显式导入
挂载后	mounted	onMounted	需显式导入
卸载前	beforeDestroy	onBeforeUnmount	语义更准确
卸载后	destroyed	onUnmounted	语义更准确

迁移示例：

// Vue2 生命周期
export default {
  created() { /* ... */ },
  mounted() { /* ... */ },
  beforeDestroy() { /* ... */ }
}

// Vue3 生命周期
import { onMounted, onBeforeUnmount } from 'vue'
export default {
  setup() {
    onMounted(() => { /* 挂载后逻辑 */ })
    onBeforeUnmount(() => { /* 卸载前清理 */ })
  }
}

四、模板语法增强

1. 多根节点支持

<!-- Vue2: 必须包裹单一根元素 -->
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

<!-- Vue3: 支持多根节点（Fragment） -->
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

2. 新增实用指令

指令	功能说明	Vue2 替代方案
v-memo	缓存模板片段，依赖不变时跳过重新渲染	手动实现计算属性
Teleport	将组件内容渲染到指定 DOM 节点（如 body）	需手动操作 DOM

Teleport 示例：

<!-- Vue3 弹窗组件 -->
<teleport to="body">
  <div class="modal">...</div>
</teleport>

五、其他关键差异

1. TypeScript 支持

• Vue2：需配合 vue-class-component 装饰器，类型推导有限
• Vue3：原生支持，ref/reactive 提供完整类型推断

示例：

// Vue3 TS 组件
const count = ref<number>(0); // ✅自动推导类型
const user = reactive({ name: 'John' }); // ✅对象类型推导

2. 性能优化

优化策略	Vue2	Vue3
静态节点处理	基础静态分析	🔧静态树提升（Static Tree Hoisting）
diff 算法	全量对比	📌补丁标志（Patch Flags）
包体积	~20KB (gzipped)	~10KB (gzipped) + Tree Shaking

3. 数组处理

• Vue2：需重写数组方法（如 push/pop）才能触发响应式
• Vue3：原生数组操作自动触发更新

示例：

// Vue2: 需调用变异方法
this.$set(this.items, index, newValue);

// Vue3: 直接操作数组
items.push(newItem); // ✅自动触发更新

六、生态系统变化

生态组件	Vue2 版本	Vue3 版本	备注
Router	vue-router@2	vue-router@4	完全兼容 Vue3
Store	vuex@2	vuex@4	支持 Composition API
UI 库	Element UI	Element Plus	专为 Vue3 重构
构建工具	Vue CLI 2	Vite（默认）	更快的冷启动和 HMR

七、实际场景选择建议

场景	推荐版本	原因
新项目开发	Vue3	✅更好的 TypeScript 支持 ✅组合式 API 提升大型项目可维护性
旧项目升级	分阶段迁移	优先重构复杂组件为 Composition API，使用 @vue/compat 兼容运行
兼容性要求高	Vue2	支持 IE9+，适合企业内部旧系统改造
小型快速迭代	Vue2	简单轻便，学习曲线平缓

以上对比基于当前最新实践（2025年），建议新项目优先选择 Vue3 以获得更好的类型安全和长期维护性。完整迁移指南可参考Vue3 官方文档。