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: 跟踪或触发渲染的方式