setup

// component
export default {
  setup(props, context){
    // 该函数在组件属性被赋值后立即执行，早于所有生命周期钩子函数
    // props 是一个对象，包含了所有的组件属性值
    // context 是一个对象，提供了组件所需的上下文信息
  }
}

context对象的成员

成员	类型	说明
attrs	对象	同vue2的this.$attrs
slots	对象	同vue2的this.$slots
emit	方法	同vue2的this.$emit

生命周期函数

vue2 option api	vue3 option api	vue 3 composition api
beforeCreate	beforeCreate	不再需要，代码可直接置于setup中
created	created	不再需要，代码可直接置于setup中
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestroy	改 beforeUnmount	onBeforeUnmount
destroyed	改unmounted	onUnmounted
errorCaptured	errorCaptured	onErrorCaptured
-	新renderTracked	onRenderTracked
-	新renderTriggered	onRenderTriggered

新增钩子函数说明：

钩子函数	参数	执行时机
renderTracked	DebuggerEvent	渲染vdom收集到的每一次依赖时
renderTriggered	DebuggerEvent	某个依赖变化导致组件重新渲染时

DebuggerEvent:

• target: 跟踪或触发渲染的对象
• key: 跟踪或触发渲染的属性
• type: 跟踪或触发渲染的方式

composition api相比于option api有哪些优势？

从两个方面回答：

1. 为了更好的逻辑复用和代码组织
2. 更好的类型推导

有了composition api，配合reactivity api，可以在组件内部进行更加细粒度的控制，使得组件中不同的功能高度聚合，提升了代码的可维护性。对于不同组件的相同功能，也能够更好的复用。
相比于option api，composition api中没有了指向奇怪的this，所有的api变得更加函数式，这有利于和类型推断系统比如TS深度配合。