Vue 2和Vue 3之间的主要差异可以概括为以下几点：
- 组合式API（Composition API）: Vue 3引入了一个新的配置——setup函数，它是组合式API的入口。在Vue 2中，我们使用mixins、extends等来混入逻辑，但这些方法有副作用，并且在复杂应用中会导致代码难以理解和维护。Vue 3的组合式API提供了一种更简单、更现代的方式来组织和重用代码。
- 响应式系统: Vue 3使用Proxy替代Vue 2中的Object.defineProperty来跟踪依赖，从而使其能够检测到嵌套对象的属性变化。这也使得开发者可以更自然地使用响应式系统，例如使用可解构的响应式对象。
- 改进的渲染机制: Vue 3通过batching和hoisting优化了渲染过程，从而提高了性能。
- 插槽: Vue 3对插槽API进行了改进，提供了新的
<slot>元素作为一个推荐的API，它更加的简洁和直观。 - 其他改变: Vue 3还引入了Fragments、Teleport、Composition API的新增功能（如reactive、ref等），并对TypeScript的支持进行了改进。
代码示例（Vue 2和Vue 3的组件对比）:
Vue 2:
<template>
<div>
<h1>{{ title }}</h1>
<button @click="increment">Count is: {{ count }}</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
title: 'Vue 2 Component'
};
},
methods: {
increment() {
this.count++;
}
}
}
</script>Vue 3:
<template>
<div>
<h1>{{ title }}</h1>
<button @click="increment">Count is: {{ count }}</button>
</div>
</template>
<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
setup() {
const count = ref(0);
const title = 'Vue 3 Component';
function increment() {
count.value++;
}
return { count, title, increment };
}
});
</script>在Vue 3的setup函数中，我们使用Vue提供的ref函数来创建响应式的数据。这样的API更加的声明式和直观，它提供了一种更好的方式来管理和组织你的逻辑代码。