1、setup script
用法：
哈哈
2、ref & reactive & 事件
说明：
1、ref：需要响应式的常量，赋值时需要xxx.value
2、reactive：需要响应式的对象或者数组，可直接使用或赋值
3、事件：在setup script中，直接定义事件
用法：
3、computed & watch & watchEffect
说明：
1、computed：计算函数
2、watch：监听函数，可监听常量和引用变量，可传immediate和deep。可监听对象也可只监听对象的某个属性
3、watchEffect：跟watch差不多，但是watchEffect不需要说明监听谁，用到谁就监听谁
用法：
{{ userText }}
4、生命周期
vue2 - vue3
beforeCreate -> 没了
created -> 没了
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
5、defineProps & defineEmits
父组件：
// 传进子组件
子组件：
{{ msg }}
6、defineExpose
说明：这个API主要主要作用是：将子组件的东西暴露给父组件，好让父组件可以使用
7、全局API
说明：
1、vue3已经没有filter这个全局方法了
2、vue.component -> app.component
3、vue.directive -> app.directive
4、之前Vue.xxx现在都改成app.xxx
// 全局自定义指令
app.directive('focus', {
mounted(el) {
el.focus()
}
})
// 全局自定义组件
import CustomComp from './components/CustomComp.vue'
app.component('CustomComp', CustomComp)8、自定义指令
vue2：
Vue.directive('xxx', {
// 指令绑定到指定节点，只执行一次
bind() {},
// 指定节点插入dom
inserted() { },
// 节点VNode更新时，可能刚更新，没完全更新
update() {},
// VNode完全更新
componentUpdated() {},
// 指令从指定节点解绑，只执行一次
unbind() {}
})vue3：
app.directive('xxx', {
// 在绑定元素的 attribute 或事件监听器被应用之前调用, 在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用
created() {},
// 当指令第一次绑定到元素并且在挂载父组件之前调用
beforeMount() {},
// 在绑定元素的父组件被挂载后调用
mounted() {},
// 在更新包含组件的 VNode 之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新后调用
updated() {},
// 在卸载绑定元素的父组件之前调用
beforeUnmount() {},
// 当指令与元素解除绑定且父组件已卸载时, 只调用一次
unmounted() {},
});9、defineAysncCompoment & Suspense
说明：这个API用来加载异步组件，就是用不到他就不加载，用到了才会加载
注：defineAysncCompoment需配合vue3的内置全局组件Suspense使用，需要用Suspense包住异步组件
const AsyncPopup = defineAsyncComponent({
loader: () => import("./LoginPopup.vue"),
// 加载异步组件时要使用的组件
loadingComponent: LoadingComponent,
// 加载失败时要使用的组件
errorComponent: ErrorComponent,
// 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
delay: 1000,
// 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件
// 默认值：Infinity（即永不超时，单位 ms）
timeout: 3000
})
// 使用时，可控制显隐
10、自定义hook——useUser
// useUser.ts
import { reactive, computed } from 'vue'
const useUser = () => {
const user = reactive({
name: '小红',
gender: '女'
})
const userText = computed(() => `我叫${user.name}，我是${user.gender}的`)
const switchGender = () => {
user.gender = '男'
}
return {
switchGender,
userText,
}
}
export default useUser使用hook
{{ userText }}
11、useRouter & useRoute
说明：
1、useRouter：用来执行路由跳转
2、useRoute：用来获取路由参数
12、Teleport
说明：Teleport可以将你的组件，挂载到任意一个节点之下，只要你指定一个选择器，可以是id、class
// Dialog.vue
hello world
// 将Dialog组件挂载到id为app的节点下
13、getCurrentInstance
方案一：
const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)
方案二：
const { proxy } = getCurrentInstance()
//使用proxy线上也不会出现问题
例：
import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();
// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
const { ctx } = getCurrentInstance(); // 方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy } = getCurrentInstance(); // 方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
proxy.$attrs
proxy.$data
proxy.$el
proxy.$emit
proxy.$forceUpdate
proxy.$nextTick
proxy.$options
proxy.$parent
proxy.$props
proxy.$refs
proxy.$root
proxy.$slots
proxy.$watch//自用梳理