08. Vue3深入和组合式API

// Vue2 Options API
export default {
  data() {
    return { count: 0, user: null }
  },
  computed: {
    doubleCount() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ },
    async fetchUser() { this.user = await api.getUser() }
  },
  mounted() { this.fetchUser() }
}
 
// Vue3 Composition API
import { ref, computed, onMounted } from 'vue'
 
export default {
  setup() {
    const count = ref(0)
    const user = ref(null)
 
    const doubleCount = computed(() => count.value * 2)
    const increment = () => count.value++
    const fetchUser = async () => user.value = await api.getUser()
 
    onMounted(fetchUser)
 
    return { count, user, doubleCount, increment, fetchUser }
  }
}
 
// Vue3 <script setup> 语法糖（推荐）
import { ref, computed, onMounted } from 'vue'
 
const count = ref(0)
const user = ref(null)
const doubleCount = computed(() => count.value * 2)
const increment = () => count.value++
const fetchUser = async () => user.value = await api.getUser()
 
onMounted(fetchUser)

<!-- Fragment：多个根节点 -->
<template>
  <header>头部</header>
  <main>内容</main>
  <footer>底部</footer>
</template>
 
<!-- Teleport：传送门 -->
<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <Teleport to="body">
      <div v-if="showModal" class="modal">
        <p>模态框内容</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </Teleport>
  </div>
</template>
 
<!-- Suspense：异步组件 -->
<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile :user-id="userId" />
    </template>
    <template #fallback>
      <div class="loading">加载用户信息中...</div>
    </template>
  </Suspense>
</template>
 
<!-- <script setup>：语法糖 -->
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
 
// 响应式数据
const count = ref(0)
const showModal = ref(false)
 
// 计算属性
const doubleCount = computed(() => count.value * 2)
 
// 侦听器
watch(count, (newVal) => {
  console.log(`count: ${newVal}`)
})
 
// 生命周期
onMounted(() => {
  console.log('组件已挂载')
})
 
// 方法（自动暴露给模板）
const increment = () => count.value++
</script>

// Vue2 响应式（简化）
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) dep.depend() // 依赖收集
      return val
    },
    set(newVal) {
      if (newVal === val) return
      val = newVal
      dep.notify() // 通知更新
    }
  })
}
 
// Vue3 响应式（简化）
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      track(target, key) // 依赖收集
 
      // 深度响应式
      if (typeof result === 'object' && result !== null) {
        return reactive(result)
      }
      return result
    },
 
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
 
      if (oldValue !== value) {
        trigger(target, key) // 触发更新
      }
      return result
    }
  })
}

// 1. ref - 基本类型响应式
import { ref, isRef, unref } from 'vue'
 
const count = ref(0)
const message = ref('hello')
 
console.log(count.value) // 0
count.value++ // 触发响应式更新
 
// 工具函数
console.log(isRef(count)) // true
console.log(unref(count)) // 1，等同于 count.value
 
// 2. reactive - 对象响应式
import { reactive, isReactive, toRaw } from 'vue'
 
const state = reactive({
  count: 0,
  nested: { message: 'hello' }
})
 
// 深度响应式
state.nested.message = 'world' // 触发更新
console.log(isReactive(state.nested)) // true
 
// 3. computed - 计算属性
import { computed } from 'vue'
 
const count = ref(1)
const plusOne = computed(() => count.value + 1)
 
// 可写计算属性
const writableComputed = computed({
  get: () => count.value + 1,
  set: (val) => count.value = val - 1
})
 
// 4. watch 和 watchEffect
import { watch, watchEffect } from 'vue'
 
// 侦听单个源
watch(() => state.count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`)
})
 
// 侦听多个源
watch([() => state.count, () => state.name], ([newCount, newName]) => {
  console.log('多个值发生变化')
})
 
// 立即执行的侦听器
const stop = watchEffect(() => {
  console.log(`count is ${state.count}`)
})
 
// 停止侦听
stop()

// 1. useCounter - 计数器
import { ref, computed, readonly } from 'vue'
 
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
 
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
 
  const isEven = computed(() => count.value % 2 === 0)
 
  return {
    count: readonly(count),
    increment,
    decrement,
    reset,
    isEven
  }
}
 
// 2. useFetch - 数据获取
import { ref, watchEffect, readonly } from 'vue'
 
export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)
 
  const fetchData = async () => {
    loading.value = true
    error.value = null
 
    try {
      const response = await fetch(url.value || url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }
 
  // 响应式URL自动重新获取
  if (isRef(url)) {
    watchEffect(fetchData)
  } else {
    fetchData()
  }
 
  return {
    data: readonly(data),
    error: readonly(error),
    loading: readonly(loading),
    refetch: fetchData
  }
}
 
// 3. useLocalStorage - 本地存储
import { ref, watch } from 'vue'
 
export function useLocalStorage(key, defaultValue) {
  const storedValue = localStorage.getItem(key)
  const initialValue = storedValue ? JSON.parse(storedValue) : defaultValue
  const value = ref(initialValue)
 
  // 同步到localStorage
  watch(value, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue))
  }, { deep: true })
 
  return value
}

// 在组件中使用
export default {
  setup() {
    // 计数器功能
    const { count, increment, isEven } = useCounter(10)
 
    // 数据获取
    const { data: users, loading, error } = useFetch('/api/users')
 
    // 本地存储
    const theme = useLocalStorage('theme', 'light')
 
    return {
      count,
      increment,
      isEven,
      users,
      loading,
      error,
      theme
    }
  }
}

// 1. 状态机组合式函数
export function useStateMachine(initialState, transitions) {
  const state = ref(initialState)
 
  const transition = (action) => {
    const currentTransitions = transitions[state.value]
    if (currentTransitions?.[action]) {
      state.value = currentTransitions[action]
    }
  }
 
  const can = (action) => {
    const currentTransitions = transitions[state.value]
    return currentTransitions?.[action] !== undefined
  }
 
  return { state: readonly(state), transition, can }
}
 
// 使用状态机
const { state, transition, can } = useStateMachine('idle', {
  idle: { start: 'loading' },
  loading: { success: 'success', error: 'error' },
  success: { reset: 'idle' },
  error: { retry: 'loading', reset: 'idle' }
})
 
// 2. 表单验证组合式函数
export function useFormValidation(rules) {
  const errors = ref({})
  const isValid = computed(() => Object.keys(errors.value).length === 0)
 
  const validate = (field, value) => {
    const fieldRules = rules[field]
    if (!fieldRules) return true
 
    for (const rule of fieldRules) {
      if (!rule.validator(value)) {
        errors.value[field] = rule.message
        return false
      }
    }
 
    delete errors.value[field]
    return true
  }
 
  return {
    errors: readonly(errors),
    isValid,
    validate,
    validateAll: (values) => {
      return Object.entries(values).every(([field, value]) => validate(field, value))
    }
  }
}
 
// 3. 防抖组合式函数
export function useDebounce(fn, delay = 300) {
  let timeoutId = null
 
  const debouncedFn = (...args) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => fn(...args), delay)
  }
 
  const cancel = () => clearTimeout(timeoutId)
 
  return { debouncedFn, cancel }
}

<!-- 1. Props/Emits 父子通信 -->
<!-- 父组件 -->
<template>
  <ChildComponent
    :message="parentMessage"
    :count="count"
    @update:count="count = $event"
    @custom-event="handleCustomEvent"
  />
</template>
 
<script setup>
import { ref } from 'vue'
 
const parentMessage = ref('来自父组件的消息')
const count = ref(0)
 
const handleCustomEvent = (data) => {
  console.log('收到自定义事件:', data)
}
</script>
 
<!-- 子组件 -->
<script setup>
const props = defineProps({
  message: String,
  count: { type: Number, default: 0 }
})
 
const emit = defineEmits(['update:count', 'custom-event'])
 
const updateCount = () => emit('update:count', props.count + 1)
const emitCustomEvent = () => emit('custom-event', { timestamp: Date.now() })
</script>
 
<!-- 2. Provide/Inject 跨层级通信 -->
<!-- 祖先组件 -->
<script setup>
import { provide, ref, readonly } from 'vue'
 
const theme = ref('dark')
const user = ref({ name: 'John', role: 'admin' })
 
provide('theme', theme)
provide('user', readonly(user))
provide('updateTheme', (newTheme) => theme.value = newTheme)
</script>
 
<!-- 后代组件 -->
<script setup>
import { inject } from 'vue'
 
const theme = inject('theme')
const user = inject('user')
const updateTheme = inject('updateTheme')
const config = inject('config', { api: '/api' }) // 默认值
</script>
 
<!-- 3. 模板引用 -->
<template>
  <ChildComponent ref="childRef" />
  <button @click="childRef?.someMethod()">调用子组件方法</button>
</template>
 
<script setup>
import { ref } from 'vue'
 
const childRef = ref()
</script>

// 1. Option Store（类似Vuex）
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Eduardo'
  }),
 
  getters: {
    doubleCount: (state) => state.count * 2
  },
 
  actions: {
    increment() {
      this.count++
    },
 
    async fetchUserData() {
      const userData = await api.getUser()
      this.name = userData.name
    }
  }
})
 
// 2. Composition Store（推荐）
export const useCounterStore = defineStore('counter', () => {
  // state
  const count = ref(0)
  const name = ref('Eduardo')
 
  // getters
  const doubleCount = computed(() => count.value * 2)
 
  // actions
  const increment = () => count.value++
 
  const fetchUserData = async () => {
    const userData = await api.getUser()
    name.value = userData.name
  }
 
  return { count, name, doubleCount, increment, fetchUserData }
})

// 在组件中使用Pinia
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
 
const store = useCounterStore()
 
// 解构响应式数据（需要storeToRefs）
const { count, name, doubleCount } = storeToRefs(store)
 
// 解构actions（不需要storeToRefs）
const { increment, fetchUserData } = store
 
// 批量更新
store.$patch({ count: 10, name: 'New Name' })

<template>
  <!-- 静态提升：静态元素提升到渲染函数外部 -->
  <div class="static-class">
    <h1>静态标题</h1>
    <!-- 只有动态内容会重新渲染 -->
    <p>{{ message }}</p>
    <div :class="dynamicClass">{{ count }}</div>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue'
 
const message = ref('Hello Vue3')
const count = ref(0)
const dynamicClass = computed(() => count.value > 10 ? 'large' : 'small')
</script>

// 1. 使用shallowRef减少深度响应式开销
import { shallowRef, triggerRef, markRaw } from 'vue'
 
const state = shallowRef({
  count: 0,
  nested: { value: 'hello' }
})
 
// 手动触发更新
const updateNested = () => {
  state.value.nested.value = 'world'
  triggerRef(state) // 手动触发响应式更新
}
 
// 2. 使用markRaw避免响应式转换
const state = reactive({
  foo: markRaw({
    // 这个对象不会被转换为响应式
    nestedProperty: 'value'
  })
})

<!-- 1. 使用v-memo缓存子树 -->
<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
    <p>{{ item.name }}</p>
    <p>{{ item.description }}</p>
  </div>
</template>
 
<script setup>
// 2. 异步组件加载
import { defineAsyncComponent } from 'vue'
 
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingComponent,
  delay: 200,
  timeout: 3000
})
</script>

# 创建Vue3项目
npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

// Vue Router 4 基础配置
import { createRouter, createWebHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/user/:id',
      name: 'User',
      component: () => import('./views/User.vue'),
      props: true
    }
  ]
})

// Element Plus（推荐）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
app.use(ElementPlus)
 
// Ant Design Vue
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
 
app.use(Antd)

// Vitest + Vue Test Utils
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
 
describe('MyComponent', () => {
  it('renders properly', () => {
    const wrapper = mount(MyComponent, {
      props: { msg: 'Hello Vitest' }
    })
    expect(wrapper.text()).toContain('Hello Vitest')
  })
})