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 兼容模式过渡。