Vue 3 Composition API 实战指南

<script setup>
// Options API：同一功能的代码分散在各处
export default {
  data() {
    return { count: 0, doubled: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  watch: {
    count(val) { this.doubled = val * 2 }
  }
}
</script>

<script setup>
// Composition API：按逻辑组织
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
</script>

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

// ref：适用于基本类型和需要重新赋值的场景
const count = ref(0)
const message = ref('hello')

// reactive：适用于对象类型
const user = reactive({
  name: 'Alice',
  age: 25,
  hobbies: ['coding', 'reading']
})

// 修改数据
function updateUser() {
  count.value++  // ref 需要通过 .value 访问
  user.age = 26  // reactive 直接访问
}
</script>

<template>
  <p>{{ count }}</p>
  <p>{{ user.name }} - {{ user.age }}</p>
</template>

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

const todos = ref([
  { text: '学习 Vue 3', done: true },
  { text: '写博客', done: false },
  { text: '锻炼身体', done: false }
])

// 只读计算属性
const completedCount = computed(() =>
  todos.value.filter(t => t.done).length
)

// 可写计算属性
const allDone = computed({
  get() {
    return todos.value.every(t => t.done)
  },
  set(value) {
    todos.value.forEach(t => { t.done = value })
  }
})
</script>

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

const searchQuery = ref('')
const results = ref([])

// watch：监听特定数据源
watch(searchQuery, async (newVal, oldVal) => {
  if (newVal.length > 2) {
    results.value = await fetchSearch(newVal)
  }
}, { debounce: 300 })

// watchEffect：自动追踪依赖
watchEffect(() => {
  // 会自动追踪内部使用的响应式数据
  console.log(`当前搜索: ${searchQuery.value}`)
  document.title = `搜索: ${searchQuery.value}`
})
</script>

// composables/useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event: MouseEvent) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

<script setup>
import { useMouse } from './composables/useMouse'

const { x, y } = useMouse()
</script>

<template>
  <p>鼠标位置: {{ x }}, {{ y }}</p>
</template>

// composables/useLocalStorage.ts
import { ref, watch } from 'vue'

export function useLocalStorage<T>(key: string, defaultValue: T) {
  const stored = localStorage.getItem(key)
  const data = ref<T>(stored ? JSON.parse(stored) : defaultValue)

  watch(data, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true })

  return data
}

<script setup>
import { useLocalStorage } from './composables/useLocalStorage'

const theme = useLocalStorage('theme', 'light')
const settings = useLocalStorage('settings', {
  fontSize: 14,
  language: 'zh-CN'
})

function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>

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

// 状态
const todos = ref([
  { id: 1, text: '学习 Composition API', done: true },
  { id: 2, text: '写一个 composable', done: false },
])
const newTodo = ref('')
const filter = ref('all')

// 计算属性
const filteredTodos = computed(() => {
  switch (filter.value) {
    case 'active': return todos.value.filter(t => !t.done)
    case 'completed': return todos.value.filter(t => t.done)
    default: return todos.value
  }
})

const activeCount = computed(() =>
  todos.value.filter(t => !t.done).length
)

// 方法
function addTodo() {
  if (!newTodo.value.trim()) return
  todos.value.push({
    id: Date.now(),
    text: newTodo.value.trim(),
    done: false
  })
  newTodo.value = ''
}

function toggleTodo(id: number) {
  const todo = todos.value.find(t => t.id === id)
  if (todo) todo.done = !todo.done
}

function removeTodo(id: number) {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>

<template>
  <div class="todo-app">
    <h2>Todo List ({{ activeCount }} 项未完成)</h2>

    <input
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="添加新任务..."
    />

    <div class="filters">
      <button @click="filter = 'all'">全部</button>
      <button @click="filter = 'active'">进行中</button>
      <button @click="filter = 'completed'">已完成</button>
    </div>

    <ul>
      <li v-for="todo in filteredTodos" :key="todo.id">
        <input
          type="checkbox"
          :checked="todo.done"
          @change="toggleTodo(todo.id)"
        />
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  onBeforeMount,
  onUpdated,
  onBeforeUpdate,
  onActivated,
  onDeactivated
} from 'vue'

onBeforeMount(() => {
  console.log('组件挂载前')
})

onMounted(() => {
  console.log('组件已挂载')
  // 适合：API 请求、DOM 操作、事件监听
})

onBeforeUpdate(() => {
  console.log('组件更新前')
})

onUpdated(() => {
  console.log('组件已更新')
})

onUnmounted(() => {
  console.log('组件已卸载')
  // 适合：清理定时器、移除事件监听
})
</script>

<script setup>
// 无需 export default
// 顶层的绑定会自动暴露给模板
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

interface User {
  id: number
  name: string
  email: string
}

export function useUser(id: Ref<number>) {
  const user = ref<User | null>(null)
  const loading = ref(false)

  watch(id, async (newId) => {
    loading.value = true
    user.value = await fetchUser(newId)
    loading.value = false
  }, { immediate: true })

  return { user, loading }
}