composition api
使用上感觉差别最大的就是 composition api，它与vue2相比主要解决了两个问题：
- 每个功能块代码分散到各个options上，比如data中写页面中的reactive数据，props用于接收外部参数，methods定义内部方法，还有各种生命周期。
- 各个模块通过mixins共享数据和方法时导致的混乱。说实话用vue2好多年，mixin都没太搞明白，但感觉总能有更方便省事的替代方法。 vue3 就将这些方法都统一在了setup中去定义，返回后可以在模板中使用。
setup
-
执行时机
setup是在vue组件实例创建后并完成props的初始化之后执行，也就是beforeCreate钩子之前执行,这意味着setup中无法使用其它option（如data）中的变量，而其它option可以使用setup中返回的变量。 -
与模板结合使用
如果setup返回一个对象，这个对象的所有属性会合并到template的渲染上下文中，也就是说可以在template中使用setup返回的对象的属性。 -
setup的参数
第一个参数为props，是组件的所有参数，与vue2中一样，参数是响应式的，改变会触发更新； 第二个参数是setup context，包含emit等属性。
reactive
reactive函数接收一个对象，并返回一个对这个对象的响应式代理。
<template>
<div>
<input type="text" v-model="state.value">
<p>value: {{state.value}}</p>
</div>
</template>
<script>
import {reactive, computed, watch} from 'vue'
export default {
setup(props) {
const state = reactive({
value: '',
})
return {state}
}
}
</script>
toRefs
toRefs会将一个reactive对象转化为属性全部为ref对象的普通对象。
ref
ref接收一个用于初始化的值，并返回一个响应式的和可修改的ref对象。该ref对象存在一个value属性，value保存着ref对象的值。类似于react中的useRef。
computed
与vue2中computed的功能没有变化，它接收一个函数并返回一个value为getter返回值不可改变的响应式ref对象。
等等
生命周期函数
-
beforeCreate->setup() -
created->setup() -
beforeMount->onBeforeMount -
mounted->onMounted -
beforeUpdate->onBeforeUpdate -
updated->onUpdated -
beforeDestroy->onBeforeUnmount -
destroyed->onUnmounted -
errorCaptured->onErrorCaptured
总结
优点：可以让开发变得更灵活
缺点：大部分代码集中在setup中，容易混乱
