Vue 3 中的 setup() 函数和 Options API 有什么主要区别？

Vue 3 中的 setup() 函数和 Options API 有什么主要区别？

回答：
Vue 3 引入了 Composition API，其中 setup() 函数是其核心。与传统的 Options API（如 data、methods、computed 等选项）相比，setup() 允许开发者将逻辑按功能组织，而不是按选项类型组织，从而提升代码的可维护性和复用性。

解析：

• Options API：将组件逻辑分散在 data、methods、computed、watch 等选项中。当组件复杂时，相关逻辑可能分散在多个选项里，难以维护。
• Composition API（setup()）：在 setup() 中，可以使用 ref、reactive、computed、watch 等函数组合逻辑。相关逻辑可以封装在同一个函数或自定义 hook 中，便于复用和测试。
• 响应式系统：setup() 中需显式使用 ref 或 reactive 创建响应式数据，并显式 return 才能在模板中使用。
• 生命周期钩子：在 setup() 中使用 onMounted、onUpdated 等函数替代 beforeCreate 和 created（这两个钩子在 setup() 中不可用，因为 setup() 本身就在它们之间执行）。

例如：

// Options API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() { this.count++; }
  }
};

// Composition API
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

Composition API 特别适合大型组件或需要逻辑复用的场景，而 Options API 对于简单组件仍具有直观易读的优势。Vue 3 同时支持两者，开发者可根据项目需求选择。