Vue3 Composition API：逻辑组织的革命

Vue3 的 Composition API 是对 Vue2 Options API 的颠覆性升级，其核心优势在于按逻辑关注点聚合代码，而非按data、methods、computed等选项拆分，尤其适合处理超过 200 行代码的复杂组件。以计数器功能为例，使用<script setup>语法（Vue3.2 + 推荐写法）可大幅简化代码结构，无需再写export default，变量和函数能直接在模板中调用，同时获得更优的 TypeScript 类型推断支持。

 <script setup>
import { ref, computed, watch } from 'vue'
// 1. 响应式数据定义：ref用于基本类型，内部通过Object.defineProperty包裹值
const count = ref(0)
// 2. 计算属性：基于响应式数据派生，自动缓存结果，仅当依赖变化时重新计算
const doubleCount = computed(() => count.value * 2)
// 3. 方法定义：修改响应式数据需通过.value（模板中Vue自动解包，无需手动添加）
const increment = () => {
  count.value += 1
}
// 4. 数据监听：深度监听需配置deep: true，此处监听基础类型可省略
watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变为${newVal}`)
  // 实际场景可用于发送统计埋点、更新本地存储等操作
})
</script>

<template>
  <div class="counter-container">
    <p class="count-text">当前计数：{{ count }}</p>
    <p class="double-count-text">双倍计数：{{ doubleCount }}</p>
    <button @click="increment" class="count-btn">增加</button>
  </div>
</template>

<style scoped>
/* 补充样式让组件更贴近实际项目开发 */
}
</style>

通过组合式函数（Composables）可进一步封装复用逻辑，例如useCounter.js，这类函数通常以use开头，内部管理独立的响应式状态和方法，能在多个组件间共享，且不会产生命名冲突。比如在商品数量选择、评分组件中，都可复用计数逻辑，大幅减少重复代码

import { ref, watch, computed } from 'vue'
/**
 * 通用计数组合式函数
 * @param {number} initialVal - 初始值，默认0
 * @param {number} maxVal - 最大值，默认无限制
 * @returns {Object} 包含响应式状态和操作方法的对象
 */
export function useCounter(initialVal = 0, maxVal = Infinity) {
  const count = ref(initialVal)
  // 派生状态：判断是否达到最大值
  const isMax = computed(() => count.value >= maxVal)
  
  const increment = () => {
    if (!isMax.value) count.value++
  }
  
  const decrement = () => {
    if (count.value > 0) count.value--
  }
  
  // 监听计数变化，可根据业务需求扩展（如超出范围提示）
  watch(count, (newVal) => {
    if (newVal > maxVal) {
      console.warn(`计数超出最大值${maxVal}，已自动调整为${maxVal}`)
      count.value = maxVal
    }
  })
  return { count, isMax, increment, decrement }
}

在组件中使用时，只需引入并调用函数，即可快速获得完整的计数功能，且可根据场景灵活配置参数：

<script setup>
import { useCounter } from '@/composables/useCounter'
// 配置初始值为1，最大值为10（如商品购买数量限制）
const { count, isMax, increment, decrement } = useCounter(1, 10)
</script>