简述setup()函数在Vue3中起什么作用 ？

在Vue 3中，setup()函数是Composition API的核心入口，其作用主要包括以下几个方面：

1. 替代Options API的入口

• 替代Vue 2的data、methods等选项：setup()函数用于集中定义组件的响应式数据、方法、计算属性等，取代了Vue 2中分散的data、methods、computed等选项。

• 逻辑组织更灵活：相关逻辑可以按功能组织在一起，而不是分散在不同选项中，提升代码可读性和复用性。

2. 执行时机与上下文

• 在组件初始化阶段执行：setup()在组件实例创建之前运行（早于beforeCreate和created生命周期钩子），因此**无法访问this**（此时实例未创建）。

• 接收两个参数：

  • props：组件接收的响应式属性，不可直接解构（会失去响应性）。

  • context：包含attrs（非响应式属性）、slots（插槽）、emit（触发事件的方法）等上下文信息。

3. 声明响应式数据与方法

• 响应式数据：通过ref（简单类型）或reactive（对象）创建响应式变量。

  import { ref, reactive } from 'vue';
  setup() {  
      const count = ref(0);  
      const state = reactive({ name: 'Vue' });  
      return { count, state };
  }

• 方法定义：直接声明函数并返回，供模板调用。

  setup() { 
      const increment = () => { count.value++; };
      return { increment };
  }

4. 整合生命周期钩子

• 通过导入函数使用钩子：如onMounted、onUpdated等，替代Options API的生命周期选项。

  import { onMounted } from 'vue';
  setup() {
      onMounted(() => {  
          console.log('组件已挂载');
      });
  }

• 覆盖beforeCreate和created：原本在这两个钩子中的代码应直接写入setup()。

5. 返回模板使用的数据与方法

• 必须返回对象：setup()返回的对象中的属性和方法会暴露给模板使用。

  setup() {
      return { count, increment };
  }

• 模板中直接访问：与Vue 2的data和methods类似，模板可直接使用返回的变量和方法。

6. 逻辑复用的核心机制

• 自定义组合函数：将相关逻辑抽离为可复用的函数，利用setup()整合到不同组件中。

  javascript复制// 复用逻辑：鼠标跟踪
  function useMousePosition() {  
     const x = ref(0);  
     const update = e => { x.value = e.pageX; };  
     onMounted(() => window.addEventListener('mousemove', update));  
     return { x };
  }
  // 组件中使用
  setup() {  
     const { x } = useMousePosition();  
     return { x };
  }

总结

setup()是Vue 3 Composition API的基石，它通过集中式的代码组织和函数式编程模式，解决了Vue 2中逻辑分散和复用困难的问题。其核心作用包括整合组件逻辑、声明响应式状态、访问组件上下文及生命周期管理，为构建复杂应用提供了更灵活和可维护的方案。