// Vue 2: Options API（按类型分组）
export default {
  data() {
    return {
      count: 0,
      message: ''
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    },
    updateMessage(val) {
      this.message = val
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

问题：
  ├─ 功能分散在data/computed/methods中
  ├─ 同一个逻辑分布在多个选项中
  └─ 大组件难以维护（>500行）

// Vue 3: Composition API（按功能分组）
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 所有与count相关的逻辑在一起
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    const increment = () => count.value++
    
    // 所有与message相关的逻辑在一起
    const message = ref('')
    const updateMessage = (val) => message.value = val
    
    // 生命周期钩子
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return { count, doubleCount, increment, message, updateMessage }
  }
}

优势：
  ├─ 逻辑内聚（相关代码在一起）
  ├─ 可组合（extract到composable）
  └─ 可维护性高