Vue 2 与 Vue 3 的差异不仅体现在语法层面，而是整个设计与生态的重构

一、vue2和vue3差异

1. 响应式系统
   Vue2：使用 Object.defineProperty 实现响应式，只能监听对象已有属性，数组变更需特殊方法（如 push/splice）。
   Vue3：使用 Proxy 实现响应式，能监听所有属性和数组变更，性能更好，语法更简洁。
2. 组件定义方式
   Vue2：主要使用 Options API（data、methods、computed、watch 等）。
   Vue3：支持 Options API，同时引入 Composition API（setup、ref、reactive、computed、watch、生命周期钩子等），更灵活、易于逻辑复用。
3. 生命周期钩子
   Vue2：如 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
   Vue3：生命周期名称变更（如 beforeDestroy → beforeUnmount），并可在 setup 中用 onMounted、onUnmounted 等组合式 API。
4. 性能优化
   Vue2：响应式性能有限，虚拟 DOM diff 算法较旧。
   Vue3：响应式性能提升，虚拟 DOM diff 更快，Tree-shaking 支持更好，包体积更小。
5. TypeScript 支持
   Vue2：TypeScript 支持有限，类型推断不完善。
   Vue3：原生支持 TypeScript，类型推断和 IDE 支持更完善。
6. Teleport/Fragments/Suspense
   Vue2：不支持 Teleport（传送门）、Fragments（多根节点）、Suspense（异步组件占位）。
   Vue3：支持 Teleport、Fragments、Suspense，模板更灵活。
7. 自定义指令和插件
   Vue2：自定义指令和插件 API 较旧。
   Vue3：自定义指令和插件 API 更新，语法更统一。
8. 事件监听
   Vue2：$on/$off/$emit 支持组件间通信。
   Vue3：移除 $on/$off，推荐使用 props/emits 或 mitt 等库。
9. 兼容性和生态
   Vue2：生态成熟，许多第三方库基于 Vue2。
   Vue3：新特性多，部分旧库需升级，官方维护兼容层（@vue/compat）。
10. 模板语法
    Vue2：模板只能有一个根节点。
    Vue3：支持多个根节点（Fragments）。
11. API 变更
    Vue2：如 Vue.extend、Vue.observable、Vue.set、Vue.delete。
    Vue3：推荐使用 reactive、ref、toRefs、toRaw 等新 API，部分旧 API 废弃。
12. 服务端渲染（SSR）
    Vue2：SSR 方案较旧，API 不统一。
    Vue3：SSR API 全新设计，性能更好，易于集成。

二、业务维度（写代码时的体感）

1. 响应式

// Vue2 —— 注意不能监听新增属性
this.$set(this.obj, 'newKey', val)

// Vue3 —— 随便加
import { reactive } from 'vue'
const state = reactive({})
state.newKey = val        // 完全 OK

2. 逻辑复用

// Vue2 —— Mixin 命名冲突、来源不明
mixins: [mouseMixin, fetchMixin]

// Vue3 —— 组合式函数，自动解构
import { useMouse, useFetch } from '@/composables'
const { x, y } = useMouse()
const { data } = useFetch(url)

3. 模板写法

<!-- Vue2 必须包一层 -->
<template>
  <div>
    <header/>
    <main/>
  </div>
</template>

<!-- Vue3 可多个根节点 -->
<template>
  <header/>
  <main/>
</template>

4. v-model 升级

<!-- Vue2 一个组件只能一个 v-model -->
<MyComponent v-model="value" />

<!-- Vue3 支持多个，自定义名字 -->
<MyComponent v-model:title="t" v-model:content="c" />