我们之前所讲的基本都是vue2的一些内容，但是是可以在vue3中使用的。
vue3相对于vue2来说就像是pro 和 promax的区别一个升级的版本
需要注意的是vue3依旧兼容大部分的vue2写法，只是有一部分不再兼容，这部分大家可以自行搜索
我们先来介绍一下vue的新特性：
set up()
1.ref和reactive
我们之前的
数据需要渲染到页面内借助的就是data（）{}这个函数，但是在vue3中我们提供了一个新的办法：即ref 和 reactive 。
export default {
data(){
return{
数据
}
}
}
export default {
setup(){
let num = ref( 0 )
return {
num,
}
}
}我们对比来看，可能会觉得第一个使用data的方法较为简单，以为它相比于setuo
更为方便。如果只看这一方面确实如此，但是setup不仅可以return变量，还可以return一个函数。即：
setup(){
let num = ref(0)
function number(){
num.value++
}
return{
num,
number,
}
}这样来看，setup似乎更为集中，不需要再单独的写data和methods
然后我们可能还会注意到，在number函数中，我们通过num.value进行的累加操作。那为什么不直接用num++呢？
主要是因为ref创建变量的时候返回的是一个 响应式包装对象 ，它把原始值包裹在了.value属性中，所以我们需要通过num.value才能修改这个值。但是在我们模板语法{{}}中直接使用num就可以渲染到页面上了，这是因为vue内部做的 语法糖 处理。这个不需要过多关注。
如果我们需要返回一个复杂数据类型的数据（比如说数组或者对象）就需要使用reactive了
它的用法基本和ref一样
export default {
set up(){
let nums = reactive( ["x","y","z","v"] )
return {
nums,
}
}
}需要注意的是还是于ref有差异的：
| 特性 | ref | reactive |
| 适合类型 | 基本类型 | 对象/数组 |
| 访问值的方式 | .value | 直接访问 |
| 模板中是否需要.value | 不需要（因为语法糖 | 不需要 |
| js中是否需要.value | 需要 | 不需要 |
同时需要主义的是使用ref和reactive之前我们需要：
import {ref,reavtive} from "vue"导入
props
它的作用就是父组件给子组件传递数据，我们都只到，父组件引入子组件之后可以通过
<子组件 />来把子组件加载到父组件中
在这个标签里面我们可以写一下数据，比如我想传递一个名字：<子组件 name="xxx" />
然后在子组件内读取的时候需要这样写（前提是父组件需要应用子组件并且让子组件显示了）
<script>
export default {
props: {
name : String
},
setup(props) {
let name = props.name;
return {
name,
}
}
}
</script>
<template>
<p>这是父组件来的数据{{name}}</p>
</template>
<style>
</style>这里name变量不使用ref是因为props本身就是响应式的数据。
并且在vue3的setup中是没有this的，如果想获取当前实例对象可以使用setup的第二个参数
setup(props，ctx) 即ctx，这个对象里面包含了一些信息
生命周期函数
vue的组件是存在一系列成为生命周期钩子的函数。
在vue2中生命周期钩子有八个
| beforeCreate | 实例刚创建，data和methods未初始化 |
| created | 实例已创建，data和methods可用，但是未挂载到页面 |
| beforeMount | 挂载前，el和template编译完成，未插入dom |
| mounted | 挂载完成，dom可操作 |
| beforeUpdata | 数据更新前，是用于更新前的处理 |
| updated | 数据更新后，dom重新渲染 |
| beforeDestroy | 销毁前，可以清除定时器、事件监听等 |
| destroyed | 销毁完成，组件被完全移除 |
生命周期钩子书写的位置是与data、methods平级的，它虽然是函数但是并不包含在methods里面。
在vue3中，我们的生命周期钩子只有六个，也就是失去了beforeCreate和create这两个
| onbeforeMount | 挂载前，el和template编译完成，未插入dom |
| onmounted | 挂载完成，dom可操作 |
| onbeforeUpdata | 数据更新前，是用于更新前的处理 |
| onupdated | 数据更新后，dom重新渲染 |
| onbeforeDestroy | 销毁前，可以清除定时器、事件监听等 |
| ondestroyed | 销毁完成，组件被完全移除 |
也就是只剩下这六个，同时，这六个生命周期钩子的书写位置也是和变量函数一样在steup内部
书写的时候要注意它们前面多了一个 on 并且在写函数的时候可以写多个，比如三个onmounted函数是不会导致函数重名的错误的。它的书写格式是 onmounted(回调函数)
并且，如果使用这些函数就需要我们import { onxxx } from "vue" 把它的名字单独的引入。
组件之间传递数据
父组件传递数据给子组件
我们使用provide，使用之前需要import {provide} from "vue"导入它
导入之后就可以在setup里面使用了：provide(key,value)传递的是一个键值对
在子组件内接收数据需要用到inject，同样的也需要import {inject} from "vue"导入它
只需要inject(key)就可以了，可以创建变量来接收它的值。
key值是需要使用引号引起来的，接收发送方都需要。
这个是不限层级的，假如说第一层使用provide传递了值，我可以在子、孙、孙子组件直接使用inject接收值