一句话结论

Composition API 提供了更好的逻辑复用和代码组织方式。

基础组件示例

简单的计数器组件

<template>
  <div class="counter">
    <button @click="decrement">-</button>
    <span class="count">{{ count }}</span>
    <button @click="increment">+</button>
    <p>已点击: {{ clickCount }} 次</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const clickCount = ref(0)

const increment = () => {
  count.value++
  clickCount.value++
}

const decrement = () => {
  count.value--
  clickCount.value++
}
</script>

<style scoped>
.counter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.count {
  font-size: 24px;
  font-weight: bold;
  min-width: 60px;
  text-align: center;
}

button {
  padding: 8px 16px;
  font-size: 18px;
  cursor: pointer;
}
</style>

使用 Composables

创建可复用的逻辑

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  const reset = () => {
    count.value = initialValue
  }
  
  return {
    count,
    increment,
    decrement,
    reset
  }
}

在组件中使用

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, increment, decrement, reset } = useCounter(10)
</script>

数据获取示例

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">错误: {{ error }}</div>
    <div v-else>
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const user = ref(null)
const loading = ref(true)
const error = ref(null)

onMounted(async () => {
  try {
    loading.value = true
    const response = await fetch('/api/user')
    if (!response.ok) throw new Error('获取用户失败')
    user.value = await response.json()
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
})
</script>

可复用的要点

• 使用 <script setup> 简化代码
• 将逻辑抽取到 composables 中复用
• 使用 ref 和 reactive 管理状态
• 合理使用生命周期钩子
• 保持组件的单一职责

参考链接

• Vue 3 Composition API