Vue3常用的api
1. createApp() 创建一个应用实例
vue2时使用的是new Vue()
使用场景：写插件（封装全局组件等）
2. provide/inject 依赖注入
当父组件传值给后代，不想要一层一层传递时 可使用。
使用场景：父组件传值到后代组件
缺点：不好维护和查询数据来源
3. directive
自定义指令
使用场景：常用于 自动聚焦、动画效果、权限控制等
4. mixin
混入
使用场景：可以在生命周期中添加我们想要插入的功能，我本人在做访客记录的时候用到过，在onShow和onHide阶段分别做了事件监听和日志发送、卸载监听
5. app.config.globalProperties
获取vue这个全局对象的属性和方法
使用场景：自己封装插件的时候需要把方法添加到对象中
6. $nextTick
等待下次DOM更新刷新的工具方法：nextTick返回一个Promise，回调函数是放在Promise中的，所以是异步执行
使用场景：在需要操作更新后的 DOM 时使用 $nextTick
7. computed
计算属性
使用场景：这个值是有缓存的 在总价计算等地方可以使用
8. ref、reactive、toRef、toRefs
ref：定义响应式数据（基本类型）
reactive：定义响应式数据（复杂类型）
toRef：从 使用reactive定义的数据中 解构出一个值
toRefs：从 使用reactive定义的数据中 解构出多个值
使用场景：定义响应式数据
<template>
<div>
{{ sum }}
<hr />
{{ obj }}
<hr />
{{ name }}
</div>
</template>
<script setup>
import { ref,reactive,toRef,toRefs } from 'vue'
let sum = ref(6)
let obj = reactive({
name: '张三',
age: 18
})
// let name = toRef(obj,'name')
let { name,age } = toRefs(obj)
const changeName = () => {
// obj.name = '李四'
name.value = '王五'
}
</script>
9. watch
监听（vue3不需要深度监听）
10. slot
插槽： 匿名 具名 作用域
使用场景：后台管理系统 左侧为固定菜单、右侧不固定内容 那么右侧是插槽。
11. teleport组件及其使用场景（额外）
teleport组件是一个传送门
通常在自己封装弹出框的时候，需要在页面居中展示，不受当前组件的限制，可以把弹出框传送到body中，来根据body居中展示
<template>
<div class="box">
<button @click="popUp">按钮</button>
<teleport to="body">
<div class="mo" v-if="show">弹出框</div>
</teleport>
</div>
</template>
<script setup>
import { ref } from 'vue'
let show = ref(false)
const popUp = ()=>{
show.value = true
}
</script>
<style>
.box {
position: relative;
}
.mo {
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
</style>
