本文主要讲解vue3中组合式api相关。废话不多说，先上文档。
vue3文档：vue3js.cn/docs/guide/…
composition api文档：vue3js.cn/docs/api/co…
先讲讲vue2和3的一些区别：
在vue2中创建一个vue应用:
new Vue(options).$mount('#app');
Vue.use(插件);
在vue3中创建一个vue应用:
createApp(App根组件).use(插件).mount('#app');
Vue2中一个vue应用既是一个vue组件也是一个vue实例。this指向组件实例。访问属性就是访问vue实例的属性。不管是use还是mixin都会污染整个vue应用。 Vue3中可以创建多个vue应用，只需挂载在不同的节点上。提供的数据依赖只针对本个应用，不会污染其他应用，利于tree shaking。对于option api，this其实是个代理对象，代理了组件实例。访问属性是访问组件代理对象，组件代理对象去访问vue实例的属性。写起来和过去一样。
#### setup函数
setup函数会在所有声明周期之前调用，相当于created和beforeCreate，返回的数据会挂载到组件实例上。this是undefined，那么怎么获取数据呢？
setup函数接收两个参数props和context。
props：是一个对象，包含了所有的组件属性值。
context：是一个对象，提供了组件的上下文信息。
interface Data {
[key: string]: unknown
}
interface SetupContext {
attrs: Data
slots: Slots
emit: (event: string, ...args: unknown[]) => void
}
function setup(props: Data, context: SetupContext): Data
注意一点：数据方面在setup函数里面ref object是一个对象，访问需要.value。但vue在模板里面做了处理，对于ref object可以直接使用数据而不用.value去访问。原因是我们在模板里面访问数据首先访问的是组件代理对象，他会去组件实例中访问对应的.value。
生命周期：
上面说到setup函数相当于created和beforeCreate,会在一开始执行。再看看其他的声明周期函数：
options api -> composition api
- beforeCreate-> setup
- ceated-> setup
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeUnmount -> onBeforeUnmount
- unmounted -> onUnmounted
- errorCaptured -> onErrorCaptured
- renderTracked -> onRenderTracked//运行时间：模板预编译会编译成一个render函数，render函数中会创建虚拟节点收集依赖。只要收集到依赖，这个生命周期就会运行。事件参数e.target就是收集的依赖。
- renderTriggered -> onRenderTriggered//运行时间：当依赖被更改组件重新渲染时运行。
相比于vue2增加了两个钩子函数：
renderTracked：模板预编译会编译成一个render函数，render函数中会创建虚拟节点收集依赖。只要收集到依赖，这个生命周期就会运行。事件参数e.target就是收集的依赖。
renderTriggered：当依赖被更改组件重新渲染时运行。
Provide / Inject：
和vue2稍微有点不同，但作用相同。vue3需要显式导入provide和inject。
provide('xxx', 变量)
inject('xxx')就可以访问变量了
如果不希望注入的数据被子组件更改，可以使用readonly。
注：若有理解上的疏漏望指正。
