Vue Composition API 完全指南：setup、ref、reactive、computed、watch、生命周期与自定义 Composable

<script setup>
// 所有变量和函数自动暴露给模板
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  },
}
</script>

import { ref } from 'vue'

const count = ref(0)          // Ref<number>
const name = ref('Alice')     // Ref<string>
const user = ref({ age: 25 }) // Ref<{ age: number }>

// 读取/修改都需要 .value
console.log(count.value)      // 0
count.value++                 // 触发更新
console.log(count.value)      // 1

// 模板中自动解包，无需 .value
// <template><p>{{ count }}</p></template>

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: { name: 'Alice', age: 25 },
  items: [],
})

state.count++              // 直接修改，无需 .value
state.user.name = 'Bob'    // 深度响应式
state.items.push('apple')  // 数组方法正常工作

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 只读计算属性
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

// 可写计算属性
const displayName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val) => {
    const [first, last] = val.split(' ')
    firstName.value = first
    lastName.value = last
  },
})

// 使用
// displayName.value = 'Jane Smith'  // 自动拆分赋值

import { ref, watch } from 'vue'

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

// 监听单个 ref
watch(query, async (newVal, oldVal) => {
  results.value = await searchApi(newVal)
}, { immediate: false })  // immediate: 创建时立即执行一次

// 监听多个源
watch([query, page], async ([newQuery, newPage]) => {
  results.value = await searchApi(newQuery, newPage)
})

// 监听深层对象（默认只监听引用变化）
watch(
  () => state.user,       // getter 返回要监听的对象
  (newVal, oldVal) => { /* ... */ },
  { deep: true }           // 深度监听
)

// 获取旧值（对象类型需注意结构问题）
watch(user, (newVal, oldVal) => {
  console.log(`${oldVal?.name} → ${newVal?.name}`)
})

import { ref, watchEffect } from 'vue'

const count = ref(0)
const multiplier = ref(2)

// 自动追踪所有响应式依赖
watchEffect(() => {
  console.log(count.value * multiplier.value)  // 追踪 count 和 multiplier
})

// 带清理
watchEffect((onCleanup) => {
  const timer = setInterval(() => {
    console.log(count.value)
  }, 1000)

  onCleanup(() => {
    clearInterval(timer)  // 下一次执行或组件卸载时清理
  })
})

import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  onErrorCaptured,
} from 'vue'

// 挂载
onBeforeMount(() => console.log('组件挂载前'))
onMounted(() => console.log('组件已挂载'))

// 更新
onBeforeUpdate(() => console.log('组件更新前'))
onUpdated(() => console.log('组件已更新'))

// 卸载
onBeforeUnmount(() => console.log('组件卸载前'))
onUnmounted(() => console.log('组件已卸载'))

// 错误捕获
onErrorCaptured((err, instance, info) => {
  console.error('捕获到错误:', err, info)
  return false  // true: 继续向上传播，false: 阻止传播
})

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
const title = 'Hello'
const handleUpdate = (val) => console.log(val)
</script>

<template>
  <Child :title="title" @update="handleUpdate" />
</template>

<!-- Child.vue -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
})

const emit = defineEmits(['update', 'delete'])

const notifyParent = () => {
  emit('update', 'new value')
}
</script>

<!-- CustomInput.vue -->
<script setup>
const model = defineModel()  // Vue 3.4+ 简化写法
// 等价于：const props = defineProps(['modelValue'])
//        const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input v-model="model" />
</template>

<!-- 使用 -->
<CustomInput v-model="text" />

// 祖先组件
import { provide, ref } from 'vue'

const theme = ref('dark')
provide('theme', theme)
provide('toggleTheme', () => {
  theme.value = theme.value === 'dark' ? 'light' : 'dark'
})

// 后代组件
import { inject } from 'vue'

const theme = inject('theme', 'light')  // 默认值 'light'
const toggleTheme = inject('toggleTheme')

// 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  // 返回 ref，方便解构
}

// 使用
const userPref = useLocalStorage('user-pref', { theme: 'dark', lang: 'zh' })
userPref.value.theme = 'light'  // 自动同步到 localStorage

// useAsync.ts —— 异步数据获取
export function useAsync<T>(fn: () => Promise<T>) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const loading = ref(false)

  const execute = async () => {
    loading.value = true
    error.value = null
    try {
      data.value = await fn()
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }

  return { data, error, loading, execute }
}

// useEventListener.ts —— 事件监听
export function useEventListener(
  target: EventTarget,
  event: string,
  callback: EventListener
) {
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

// ========== Props / Emits ==========
const props = defineProps<{
  initialQuery: string
  pageSize: number
}>()

const emit = defineEmits<{
  search: [results: SearchResult[]]
}>()

// ========== State ==========
const query = ref(props.initialQuery)
const page = ref(1)
const results = ref<SearchResult[]>([])
const loading = ref(false)
const error = ref('')

// ========== Computed ==========
const hasNextPage = computed(() => results.value.length >= props.pageSize)

// ========== Methods ==========
async function fetchResults() {
  loading.value = true
  error.value = ''
  try {
    const data = await searchApi(query.value, page.value, props.pageSize)
    results.value = data
    emit('search', data)
  } catch (e) {
    error.value = (e as Error).message
  } finally {
    loading.value = false
  }
}

function nextPage() {
  page.value++
}

// ========== Watchers ==========
watch(query, () => {
  page.value = 1  // 查询变化时重置页码
  fetchResults()
}, { debounce: 300 })  // 防抖（需实现或使用第三方库）

watch(page, fetchResults)

// ========== Lifecycle ==========
onMounted(() => {
  fetchResults()
})
</script>

<template>
  <div class="search">
    <input v-model="query" placeholder="Search..." />
    <p v-if="loading">Loading...</p>
    <p v-else-if="error" class="error">{{ error }}</p>
    <ul v-else>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
    <button v-if="hasNextPage" @click="nextPage" :disabled="loading">
      Next Page
    </button>
  </div>
</template>

<script setup>
defineOptions({ name: 'MyComponent' })
</script>

const state = reactive({ count: 0 })

// ❌ 无效：监听的是 state 的引用，不会触发
watch(state, () => {})

// ✅ 有效：getter 返回内部值
watch(() => state.count, (newVal) => {})

// ✅ 或用 deep: true
watch(() => state, handler, { deep: true })