记录一下比较常用的vue2和vue3中的差异，如果想了解详细的全部的区别，请到vue3迁移指南详细看
一、比较常用的一些变化
1.组件 v-model的变化（非兼容）
2.key的改变（非兼容）
-
新增：对于
v-if/v-else/v-else-if的各分支项key将不再是必须的，因为现在 Vue 会自动生成唯一的key。 -
非兼容：如果你手动提供
key，那么每个分支必须使用唯一的key。你将不再能通过故意使用相同的key来强制重用分支。 -
非兼容：
<template v-for>的key应该设置在<template>标签上 (而不是设置在它的子节点上)。
3.v-if 与 v-for 的优先级对比（非兼容）
- 非兼容：两者作用于同一个元素上时，
v-if会拥有比v-for更高的优先级。
4.移除 v-on.native 修饰符（非兼容）
在vue2中，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 .native 修饰符
在vue3中，新增的 emits 选项允许子组件定义真正会被触发的事件。
5.异步组件（新增）
6.emits 选项[新增]
基本内容
强烈建议使用 emits 记录每个组件所触发的所有事件。
这尤为重要，因为我们移除了 .native 修饰符。任何未在 emits 中声明的事件监听器都会被算入组件的 $attrs，并将默认绑定到组件的根节点上。
- 一次来自
$emit()。 - 另一次来自应用在根元素上的原生事件监听器。
下面图片验证了上面话语：
推荐写法
因为官网上面的例子以setup()的模式，所以下面我将< script setup>模式也同样放在一起，方便复习熟悉,下面两种写法效果和功能是一样的，只是写法不同而已
setup()形式,例子
<template>
<button @click="$emit('click', $event)">Click</button>
</template>
<script>
export default {
emits: ['click'] // 声明事件
}
</script>
< script setup>形式，例子
<template>
<button @click="$emit('click', $event)">Click</button>
</template>
<script setup>
defineEmits(['click'])
</script>
7.Watch监听数组(非兼容)
当使用 watch 选项侦听数组时，只有在数组被替换时才会触发回调。换句话说，在数组被改变时侦听回调将不再被触发。要想在数组被改变时触发侦听回调，必须指定 deep 选项
二、值得注意的新特性
下面的主要简单记录一下是什么意思，通常没举例子的一般都是觉得看了一遍官网就知道什么含义的，比较难理解的或者需要说明的才添加，详细还是看官网
8.组合式API
什么是组合式API？
组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：
- 响应式 API：例如
ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。 - 生命周期钩子：例如
onMounted()和onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。 - 依赖注入：例如
provide()和inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。
虽然这套 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。
为什么要有组合式 API？
- 更好的逻辑复用
- 更灵活的代码组织
- 更好的类型推导
- 更小的生产包体积
生命周期钩子
这里记一下比较常用的好几个，详情看官网
| vue2 | vue3组合式 | 作用 |
|---|---|---|
| beforeMount | onBeforeMount() | 在组件被挂载之前调用。 |
| mounted | onMounted() | 在组件被挂载之后调用。 |
| beforeDestroy() | onBeforeUnmount() | 在组件实例被卸载之前调用 |
| destroyed() | onUnmounted() | 在组件实例被卸载之后调用 |
9.< script setup>
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：
- 更少的样板内容，更简洁的代码。
- 能够使用纯 TypeScript 声明 props 和自定义事件。
- 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
- 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
10.Teleport
<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
11.Fragments 片段
Vue 3 现在正式支持了多根节点的组件，也就是片段！
12.单文件组件 CSS 功能【来自 @vue/runtime-core 的 createRenderer API用来创建自定义渲染函数】
下面图片方便理解
