vue3-setup
vue3 setup
我们之前所讲的基本都是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” /> 然后在子组件内读取的时候需要这样写（前提是父组件需要应用子组件并且让子组件显示了）
这是父组件来的数据{{name}}
这里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接收值