Vue2 和 Vue3 的区别性能提升打包体积更小：Vue 3 的组件 API 是按需引用的，未使用的 API 不会被

性能提升
- 打包体积更小：Vue 3 的组件 API 是按需引用的，未使用的 API 不会被加载，从而减少了打包体积，优化了加载性能。
- 虚拟 DOM 的重写：Vue 3 对虚拟 DOM 进行了重写，提升了页面的渲染性能；
代码示例：
```
// Vue 3 中的按需引用
import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({ message: 'Hello, Vue 3!' });
```
新的生命周期钩子
- Vue 3 引入了 setup 函数，取代了 Vue 2 中的 beforeCreate 和 created 钩子函数。此外，Vue 3 将 mounted、updated、destroyed 钩子函数分别替换为 onMounted、onUpdated、onUnmounted。

组合式 API（Composition API）

Vue 3 通过 setup 函数作为入口，让开发者可以在一个地方集中管理所有逻辑，方便快速定位到某个功能用到的所有 API，提升了代码管理的便利性。
Vue 2：主要使用选项式 API 组织组件逻辑，如 data、methods、computed、watch 等。这种组织方式在处理有大量代码的组件时，代码容易分散，不易维护。

代码示例：

// Vue 2 选项式 API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
};

// Vue 3 组合式 API
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, doubleCount, increment };
  }
};

响应式 API 的改进
- Vue 3 的响应式系统：Vue 3 使用 Proxy 替代 Vue 2 中的 Object.defineProperty 实现响应式数据。这种改进使 Vue 3 能够监听整个对象的变化，包括属性的添加和删除和数组通过索引修改元素。
- Vue 2 的缺点：在 Vue 2 中，响应式数据使用 Object.defineProperty 监听对象现有属性的变化，并通过重写数组的原型方法（push,pop) 来实现响应式，无法检测到对象属性的增加和删除和通过索引直接修数组元素，需通过 $set 方法来手动触发视图更新。

特性	Vue 2（`Object.defineProperty`）	Vue 3（`Proxy`）
对对象的处理	不能检测新增/删除属性，需使用 `Vue.set`	能自动检测属性的新增/删除
对数组的处理	无法通过索引修改数组，需使用 `Vue.set`	直接监控数组所有操作，包括索引修改
性能	遍历所有属性，递归创建 getter/setter	更高效，代理整个对象
灵活性	只能拦截已存在的属性	可以拦截任何操作（读写、删除等）

**代码示例**：

```javascript
// Vue 2 响应式数据
const state = {
  message: 'Hello, Vue 2!',
};
// 新增属性方法1 
this.$set(state, 'newProp', 'New Property'); // 手动触发
// 新增属性方法2
this.myObject = Object.assign({}, this.myObject, { job: 'Developer' });
 // 直接通过索引修改，无法触发视图更新
 arr[0] = 'new value';  // 不会触发更新
 // 使用 Vue.set 来修改，能够触发视图更新
 this.$set(arr, 0, 'new value');
// 删除属性对象
this.$delete(this.myObject, 'propertyToDelete'); 
 // 删除属性数组 
this.$delete(this.myArray, index);

// Vue 3 响应式数据
const state = reactive({
  message: 'Hello, Vue 3!',
});
state.newProp = 'New Property'; // 自动触发
```

5. TypeScript 支持

Vue 3 的代码库使用 TypeScript 重写，可以使用 TS 定义数据类型，在实际开发中方便进行数据类型检测，提前发现错误，从而提升代码质量。

ts
复制代码
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);
    return { count };
  },
});

6. 全局 API 变更

在 Vue 2 中，全局 API 是直接挂载在 Vue 构造函数上的，可以通过 Vue 构造函数直接调用全局 API。Vue 3 引入了 createApp 方法用于创建实例 app，然后通过这个 app 实例调用全局 API，这种方式避免了不同实例之间的冲突。

js
复制代码
// Vue 2 中的全局组件注册
Vue.component('my-component', {
  // 组件选项
});

// Vue 3 中的全局组件注册
const app = createApp(App);
app.component('my-component', { 
  // 组件选项
});

// Vue 2 中的全局指令注册
Vue.directive('my-directive', {
  // 指令选项
});

// Vue 3 中的全局指令注册
app.directive('my-directive', { 
  // 指令选项 
});