面试题：Vue Composition API中setup函数的作用及执行时机是什么

Question

在Vue Composition API里，setup函数是一个新的组件选项。请详细阐述它在组件中的作用，以及它在组件生命周期的哪个阶段执行，并说明为什么它在这个阶段执行。

Answer 1

setup函数在组件中的作用

1. 逻辑复用：将组件的逻辑代码进行封装，方便在不同组件间复用。例如，多个组件都需要处理数据的加载和缓存逻辑，可将此逻辑封装在一个函数中，在不同组件的setup中调用，提高代码的可维护性和复用性。
2. 组合式 API 入口：作为Vue Composition API的入口点，允许开发者使用响应式数据、计算属性、方法等功能。通过ref、reactive等函数创建响应式数据，通过computed创建计算属性，通过定义普通函数创建组件方法。
3. 替代选项式 API 中的 data、methods、computed 等：以更灵活的方式组织组件逻辑，相比于选项式API，setup函数内的代码更紧凑，可根据功能将相关代码聚合在一起，而不是分散在不同的选项中。

setup函数在组件生命周期的执行阶段

setup函数在组件的创建期间执行，在beforeCreate钩子之前执行，在created钩子之前完成。

为什么在这个阶段执行

1. 初始化组件状态：在组件创建初期执行setup函数，可在组件实例化之前初始化响应式数据、计算属性等。这使得在后续的生命周期钩子（如created）中，组件已经拥有了初始化的状态和方法，可以直接使用。
2. 依赖注入：setup函数中可使用provide和inject进行依赖注入，在组件创建初期执行setup能确保依赖注入在组件使用之前就已经配置好，保证组件及其子组件能正确获取依赖。
3. 创建上下文：setup函数为组件创建了一个新的上下文，在此上下文中定义的变量和函数可在组件的模板、生命周期钩子等其他部分使用。在组件创建阶段执行setup，能够为后续组件的渲染和交互提供必要的上下文环境。