// 某個(gè)用戶管理頁面 - 典型的Options API意大利面條代碼
export default {
  data() {
    return {
      // 用戶數(shù)據(jù) (50行)
      userList: [],
      currentUser: {},
      userForm: { /* 巨大的表單對(duì)象 */ },
      
      // 分頁數(shù)據(jù) (20行)
      pagination: { /* ... */ },
      
      // 搜索數(shù)據(jù) (30行)
      searchFilters: { /* ... */ },
      
      // 權(quán)限數(shù)據(jù) (40行)
      permissions: { /* ... */ },
      
      // 上傳數(shù)據(jù) (25行)
      uploadConfig: { /* ... */ },
      
      // 還有更多... (200+行data)
    }
  },
  
  computed: {
    // 300+行的computed，各種邏輯混雜
    filteredUsers() { /* 復(fù)雜的過濾邏輯 */ },
    userStats() { /* 統(tǒng)計(jì)邏輯 */ },
    permissionMatrix() { /* 權(quán)限計(jì)算 */ },
    // ... 更多computed
  },
  
  methods: {
    // 800+行的methods，什么都有
    fetchUsers() { /* 獲取用戶 */ },
    validateForm() { /* 表單驗(yàn)證 */ },
    uploadFile() { /* 文件上傳 */ },
    calculatePermissions() { /* 權(quán)限計(jì)算 */ },
    // ... 幾十個(gè)方法
  }
}

// 重構(gòu)后的清爽代碼
<script setup>
// 每個(gè)功能都是獨(dú)立、可復(fù)用的邏輯單元
import { useUserManagement } from './composables/useUserManagement'
import { usePagination } from './composables/usePagination' 
import { useSearch } from './composables/useSearch'
import { usePermissions } from './composables/usePermissions'
import { useFileUpload } from './composables/useFileUpload'

// 聲明式地組合功能
const users = useUserManagement()
const pagination = usePagination({ pageSize: 20 })
const search = useSearch(['name', 'email', 'role'])
const permissions = usePermissions()
const upload = useFileUpload({ accept: '.jpg,.png' })

// 功能間的協(xié)調(diào)邏輯也變得清晰
const handleSearch = async () => {
  pagination.reset()
  await users.fetch({
    ...search.params,
    page: pagination.current,
    size: pagination.size
  })
}
</script>

// 傳統(tǒng)思維：這只是語法糖？
<script setup>
const count = ref(0)
const increment = () => count.value++
</script>

// 實(shí)際上編譯后的代碼
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    // 返回的對(duì)象會(huì)被暴露給模板
    return {
      count,
      increment
    }
  }
}

// setup的執(zhí)行時(shí)機(jī)
export default {
  beforeCreate() {
    console.log('1. beforeCreate')
  },
  setup() {
    console.log('2. setup執(zhí)行') // 在beforeCreate和created之間
    
    onBeforeMount(() => {
      console.log('4. beforeMount')
    })
    
    onMounted(() => {
      console.log('5. mounted')
    })
  },
  created() {
    console.log('3. created')
  }
}

// 每個(gè)組件實(shí)例都有獨(dú)立的setup作用域
<script setup>
// 這個(gè)變量只屬于當(dāng)前組件實(shí)例
let privateCounter = 0

const publicCounter = ref(0)

// 這個(gè)函數(shù)也是私有的，外部無法訪問
function internalHelper() {
  privateCounter++
}

// 只有通過defineExpose才能暴露給外部
defineExpose({
  publicCounter,
  reset: () => {
    publicCounter.value = 0
    privateCounter = 0
  }
})
</script>

// Options API：按選項(xiàng)類型分組
const component = {
  data: {
    // 所有數(shù)據(jù)放這里
    userInfo: {},
    products: [],
    cart: {}
  },
  computed: {
    // 所有計(jì)算屬性放這里
    userName() { return this.userInfo.name },
    productCount() { return this.products.length },
    cartTotal() { return this.cart.total }
  },
  methods: {
    // 所有方法放這里
    fetchUser() { /* */ },
    fetchProducts() { /* */ },
    addToCart() { /* */ }
  }
}

// Composition API：按功能邏輯分組
function useUserManagement() {
  const userInfo = ref({})
  const userName = computed(() => userInfo.value.name)
  const fetchUser = async () => { /* */ }
  
  return { userInfo, userName, fetchUser }
}

function useProductManagement() {
  const products = ref([])
  const productCount = computed(() => products.value.length)
  const fetchProducts = async () => { /* */ }
  
  return { products, productCount, fetchProducts }
}

function useCartManagement() {
  const cart = ref({})
  const cartTotal = computed(() => cart.value.total)
  const addToCart = (product) => { /* */ }
  
  return { cart, cartTotal, addToCart }
}

<script setup>
// 最簡(jiǎn)單的狀態(tài)管理
const loading = ref(false)
const data = ref([])

const fetchData = async () => {
  loading.value = true
  try {
    data.value = await api.getData()
  } finally {
    loading.value = false
  }
}

onMounted(fetchData)
</script>

// composables/useAsyncData.js
export function useAsyncData(apiFn) {
  const loading = ref(false)
  const data = ref(null)
  const error = ref(null)
  
  const execute = async (...args) => {
    loading.value = true
    error.value = null
    try {
      data.value = await apiFn(...args)
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }
  
  return { loading, data, error, execute }
}

// 在組件中使用
<script setup>
import { useAsyncData } from '@/composables/useAsyncData'
import { api } from '@/api'

const { loading, data, error, execute: fetchUsers } = useAsyncData(api.getUsers)
const { loading: productLoading, data: products, execute: fetchProducts } = useAsyncData(api.getProducts)

onMounted(() => {
  fetchUsers()
  fetchProducts()
})
</script>

// composables/useUserManagement.js
export function useUserManagement() {
  // 狀態(tài)管理
  const users = ref([])
  const currentUser = ref(null)
  const loading = ref(false)
  
  // 緩存策略
  const cache = new Map()
  const cacheKey = computed(() => {
    return `users_${JSON.stringify(searchParams.value)}`
  })
  
  // 搜索參數(shù)
  const searchParams = ref({
    keyword: '',
    role: '',
    status: 'active'
  })
  
  // 依賴注入
  const authStore = inject('authStore')
  const notificationBus = inject('notificationBus')
  
  // 復(fù)雜的計(jì)算邏輯
  const filteredUsers = computed(() => {
    return users.value.filter(user => {
      if (!authStore.hasPermission('view_user', user)) return false
      if (searchParams.value.keyword && !user.name.includes(searchParams.value.keyword)) return false
      if (searchParams.value.role && user.role !== searchParams.value.role) return false
      return true
    })
  })
  
  // 副作用管理
  watch(searchParams, async (newParams, oldParams) => {
    // 防抖搜索
    await debounce(() => fetchUsers(), 300)
  }, { deep: true })
  
  // 緩存的獲取邏輯
  const fetchUsers = async () => {
    const key = cacheKey.value
    
    if (cache.has(key)) {
      users.value = cache.get(key)
      return
    }
    
    loading.value = true
    try {
      const data = await userApi.getUsers(searchParams.value)
      users.value = data
      cache.set(key, data)
      
      notificationBus.emit('users:fetched', data)
    } catch (error) {
      notificationBus.emit('error', error.message)
    } finally {
      loading.value = false
    }
  }
  
  // 清理邏輯
  onUnmounted(() => {
    cache.clear()
  })
  
  return {
    // 狀態(tài)
    users: readonly(users),
    currentUser: readonly(currentUser),
    loading: readonly(loading),
    searchParams,
    
    // 計(jì)算屬性
    filteredUsers,
    
    // 方法
    fetchUsers,
    setCurrentUser: (user) => currentUser.value = user,
    clearSearch: () => {
      searchParams.value = { keyword: '', role: '', status: 'active' }
    }
  }
}

// hooks/useUser.js
import { ref, computed, watch, provide, inject } from 'vue'
import { userApi } from '@/api/user'
import { useLocalStorage } from '@/hooks/useLocalStorage'
import { useEventBus } from '@/hooks/useEventBus'

// 全局用戶狀態(tài)管理
const USER_INJECTION_KEY = Symbol('user')

export function createUserProvider() {
  const user = ref(null)
  const loading = ref(false)
  const error = ref(null)
  
  // 持久化用戶token
  const { value: token, setValue: setToken, removeValue: removeToken } = 
    useLocalStorage('user_token', '')
  
  // 事件總線
  const { emit, on } = useEventBus()
  
  // 計(jì)算屬性
  const isAuthenticated = computed(() => !!user.value?.id)
  const userName = computed(() => user.value?.name || '游客')
  const userAvatar = computed(() => user.value?.avatar || '/default-avatar.png')
  const permissions = computed(() => user.value?.permissions || [])
  
  // 檢查權(quán)限
  const hasPermission = (permission) => {
    return permissions.value.includes(permission) || permissions.value.includes('admin')
  }
  
  // 登錄方法
  const login = async (credentials) => {
    try {
      loading.value = true
      error.value = null
      
      const response = await userApi.login(credentials)
      
      user.value = response.user
      setToken(response.token)
      
      // 發(fā)布登錄成功事件
      emit('user:login', user.value)
      
      return response
    } catch (err) {
      error.value = err.message
      throw err
    } finally {
      loading.value = false
    }
  }
  
  // 登出方法
  const logout = async () => {
    try {
      await userApi.logout()
    } catch (err) {
      console.warn('Logout API failed:', err)
    } finally {
      user.value = null
      removeToken()
      emit('user:logout')
    }
  }
  
  // 獲取用戶信息
  const fetchUserInfo = async () => {
    if (!token.value) return
    
    try {
      loading.value = true
      const userInfo = await userApi.getUserInfo()
      user.value = userInfo
    } catch (err) {
      // token可能已過期
      if (err.status === 401) {
        logout()
      }
      error.value = err.message
    } finally {
      loading.value = false
    }
  }
  
  // 更新用戶信息
  const updateProfile = async (profileData) => {
    try {
      loading.value = true
      const updatedUser = await userApi.updateProfile(profileData)
      user.value = { ...user.value, ...updatedUser }
      emit('user:profile-updated', user.value)
      return updatedUser
    } catch (err) {
      error.value = err.message
      throw err
    } finally {
      loading.value = false
    }
  }
  
  // 監(jiān)聽token變化，自動(dòng)獲取用戶信息
  watch(token, (newToken) => {
    if (newToken) {
      fetchUserInfo()
    } else {
      user.value = null
    }
  }, { immediate: true })
  
  const userProvider = {
    user: readonly(user),
    loading: readonly(loading),
    error: readonly(error),
    isAuthenticated,
    userName,
    userAvatar,
    permissions,
    hasPermission,
    login,
    logout,
    fetchUserInfo,
    updateProfile
  }
  
  provide(USER_INJECTION_KEY, userProvider)
  
  return userProvider
}

// 在組件中使用
export function useUser() {
  const userProvider = inject(USER_INJECTION_KEY)
  if (!userProvider) {
    throw new Error('useUser must be used within a user provider')
  }
  return userProvider
}

// hooks/useAsyncData.js
import { ref, computed, watch, unref } from 'vue'

export function useAsyncData(fetcher, options = {}) {
  const {
    immediate = true,
    resetOnExecute = true,
    shallow = true,
    throwError = false
  } = options
  
  const data = shallow ? shallowRef(null) : ref(null)
  const loading = ref(false)
  const error = ref(null)
  const executeCount = ref(0)
  
  const execute = async (...args) => {
    try {
      executeCount.value++
      loading.value = true
      
      if (resetOnExecute) {
        error.value = null
      }
      
      const result = await fetcher(...args)
      data.value = result
      
      return result
    } catch (err) {
      error.value = err
      if (throwError) {
        throw err
      }
      return null
    } finally {
      loading.value = false
    }
  }
  
  // 重試邏輯
  const retry = () => execute()
  
  // 刷新數(shù)據(jù)
  const refresh = () => execute()
  
  // 清空數(shù)據(jù)
  const clear = () => {
    data.value = null
    error.value = null
  }
  
  // 計(jì)算狀態(tài)
  const isFirstLoad = computed(() => executeCount.value === 0)
  const hasData = computed(() => data.value != null)
  const hasError = computed(() => error.value != null)
  
  if (immediate) {
    execute()
  }
  
  return {
    data: readonly(data),
    loading: readonly(loading),
    error: readonly(error),
    executeCount: readonly(executeCount),
    isFirstLoad,
    hasData,
    hasError,
    execute,
    retry,
    refresh,
    clear
  }
}

// 使用示例
export function useProducts() {
  const { 
    data: products, 
    loading, 
    error, 
    execute: fetchProducts,
    refresh: refreshProducts 
  } = useAsyncData(() => productApi.getList())
  
  const productCount = computed(() => products.value?.length || 0)
  
  const searchProducts = async (keyword) => {
    return fetchProducts({ keyword })
  }
  
  return {
    products,
    loading,
    error,
    productCount,
    fetchProducts,
    refreshProducts,
    searchProducts
  }
}

// hooks/useForm.js
import { ref, reactive, computed, watch, nextTick } from 'vue'

export function useForm(initialValues = {}, options = {}) {
  const { validateOnChange = false, validateOnBlur = true } = options
  
  // 表單數(shù)據(jù)
  const formData = reactive({ ...initialValues })
  
  // 表單驗(yàn)證狀態(tài)
  const errors = ref({})
  const touched = ref({})
  const validating = ref(false)
  
  // 驗(yàn)證規(guī)則
  const rules = ref({})
  
  // 設(shè)置驗(yàn)證規(guī)則
  const setRules = (newRules) => {
    rules.value = newRules
  }
  
  // 單個(gè)字段驗(yàn)證
  const validateField = async (field) => {
    const rule = rules.value[field]
    if (!rule) return true
    
    try {
      validating.value = true
      
      // 支持函數(shù)和數(shù)組兩種規(guī)則格式
      const fieldRules = Array.isArray(rule) ? rule : [rule]
      
      for (const fieldRule of fieldRules) {
        if (typeof fieldRule === 'function') {
          const result = await fieldRule(formData[field], formData)
          if (result !== true) {
            errors.value[field] = result
            return false
          }
        } else if (fieldRule.validator) {
          const result = await fieldRule.validator(formData[field], formData)
          if (!result) {
            errors.value[field] = fieldRule.message || '驗(yàn)證失敗'
            return false
          }
        }
      }
      
      // 驗(yàn)證通過，清除錯(cuò)誤
      delete errors.value[field]
      return true
    } catch (err) {
      errors.value[field] = err.message || '驗(yàn)證出錯(cuò)'
      return false
    } finally {
      validating.value = false
    }
  }
  
  // 全表單驗(yàn)證
  const validate = async () => {
    const fieldNames = Object.keys(rules.value)
    const results = await Promise.all(
      fieldNames.map(field => validateField(field))
    )
    
    return results.every(result => result)
  }
  
  // 設(shè)置字段值
  const setFieldValue = (field, value) => {
    formData[field] = value
    
    if (validateOnChange) {
      nextTick(() => validateField(field))
    }
  }
  
  // 設(shè)置字段觸摸狀態(tài)
  const setFieldTouched = (field, isTouched = true) => {
    touched.value[field] = isTouched
    
    if (isTouched && validateOnBlur) {
      validateField(field)
    }
  }
  
  // 重置表單
  const resetForm = () => {
    Object.keys(formData).forEach(key => {
      formData[key] = initialValues[key]
    })
    errors.value = {}
    touched.value = {}
  }
  
  // 提交表單
  const submitForm = async (onSubmit) => {
    // 標(biāo)記所有字段為已觸摸
    Object.keys(rules.value).forEach(field => {
      touched.value[field] = true
    })
    
    const isValid = await validate()
    
    if (isValid && onSubmit) {
      return onSubmit(formData)
    }
    
    return isValid
  }
  
  // 計(jì)算屬性
  const hasErrors = computed(() => Object.keys(errors.value).length > 0)
  const isSubmittable = computed(() => !hasErrors.value && !validating.value)
  
  // 獲取字段錯(cuò)誤
  const getFieldError = (field) => {
    return touched.value[field] ? errors.value[field] : null
  }
  
  // 監(jiān)聽表單數(shù)據(jù)變化
  watch(
    () => formData,
    () => {
      if (validateOnChange) {
        Object.keys(touched.value).forEach(field => {
          if (touched.value[field]) {
            validateField(field)
          }
        })
      }
    },
    { deep: true }
  )
  
  return {
    formData,
    errors: readonly(errors),
    touched: readonly(touched),
    validating: readonly(validating),
    hasErrors,
    isSubmittable,
    setRules,
    validateField,
    validate,
    setFieldValue,
    setFieldTouched,
    resetForm,
    submitForm,
    getFieldError
  }
}

// hooks/useUserProfile.js - 復(fù)合型Hook
import { computed } from 'vue'
import { useUser } from './useUser'
import { useForm } from './useForm'
import { useAsyncData } from './useAsyncData'

export function useUserProfile() {
  // 組合多個(gè)基礎(chǔ)Hook
  const { user, updateProfile } = useUser()
  
  // 表單處理
  const { 
    formData, 
    errors, 
    setRules, 
    submitForm, 
    resetForm,
    getFieldError 
  } = useForm({
    name: '',
    email: '',
    bio: '',
    avatar: ''
  })
  
  // 設(shè)置驗(yàn)證規(guī)則
  setRules({
    name: [
      (value) => value ? true : '姓名不能為空',
      (value) => value.length >= 2 ? true : '姓名至少2個(gè)字符'
    ],
    email: [
      (value) => value ? true : '郵箱不能為空',
      (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? true : '郵箱格式不正確'
    ]
  })
  
  // 頭像上傳
  const { 
    data: uploadResult, 
    loading: uploading, 
    execute: uploadAvatar 
  } = useAsyncData(async (file) => {
    const formData = new FormData()
    formData.append('avatar', file)
    return uploadApi.uploadAvatar(formData)
  }, { immediate: false })
  
  // 監(jiān)聽用戶數(shù)據(jù)變化，同步到表單
  watch(user, (newUser) => {
    if (newUser) {
      Object.assign(formData, {
        name: newUser.name || '',
        email: newUser.email || '',
        bio: newUser.bio || '',
        avatar: newUser.avatar || ''
      })
    }
  }, { immediate: true })
  
  // 監(jiān)聽頭像上傳結(jié)果
  watch(uploadResult, (result) => {
    if (result?.url) {
      formData.avatar = result.url
    }
  })
  
  // 提交表單
  const handleSubmit = () => {
    return submitForm(async (data) => {
      await updateProfile(data)
      // 可以添加成功提示等邏輯
    })
  }
  
  // 計(jì)算屬性
  const hasChanges = computed(() => {
    if (!user.value) return false
    
    return Object.keys(formData).some(key => 
      formData[key] !== user.value[key]
    )
  })
  
  return {
    // 表單狀態(tài)
    formData,
    errors,
    getFieldError,
    hasChanges,
    
    // 頭像上傳
    uploading,
    uploadAvatar,
    
    // 操作方法
    handleSubmit,
    resetForm
  }
}

// hooks/useCache.js
import { ref, computed, watch } from 'vue'

export function useCache(key, fetcher, options = {}) {
  const {
    ttl = 5 * 60 * 1000, // 5分鐘緩存
    staleWhileRevalidate = true,
    maxRetries = 3
  } = options
  
  const cache = new Map()
  const loading = ref(false)
  const error = ref(null)
  const retryCount = ref(0)
  
  const getCacheKey = (params) => {
    return typeof key === 'function' ? key(params) : key
  }
  
  const isStale = (cacheEntry) => {
    return Date.now() - cacheEntry.timestamp > ttl
  }
  
  const fetchData = async (params) => {
    const cacheKey = getCacheKey(params)
    const cacheEntry = cache.get(cacheKey)
    
    // 如果有緩存且未過期，直接返回
    if (cacheEntry && !isStale(cacheEntry)) {
      return cacheEntry.data
    }
    
    // 如果啟用了staleWhileRevalidate且有過期緩存
    if (staleWhileRevalidate && cacheEntry) {
      // 先返回過期數(shù)據(jù)，后臺(tái)重新獲取
      setTimeout(() => backgroundFetch(params), 0)
      return cacheEntry.data
    }
    
    return foregroundFetch(params)
  }
  
  const foregroundFetch = async (params) => {
    try {
      loading.value = true
      error.value = null
      
      const data = await fetcher(params)
      const cacheKey = getCacheKey(params)
      
      cache.set(cacheKey, {
        data,
        timestamp: Date.now()
      })
      
      retryCount.value = 0
      return data
    } catch (err) {
      error.value = err
      
      if (retryCount.value < maxRetries) {
        retryCount.value++
        return foregroundFetch(params)
      }
      
      throw err
    } finally {
      loading.value = false
    }
  }
  
  const backgroundFetch = async (params) => {
    try {
      const data = await fetcher(params)
      const cacheKey = getCacheKey(params)
      
      cache.set(cacheKey, {
        data,
        timestamp: Date.now()
      })
    } catch (err) {
      console.warn('Background fetch failed:', err)
    }
  }
  
  const invalidateCache = (params) => {
    const cacheKey = getCacheKey(params)
    cache.delete(cacheKey)
  }
  
  const clearAllCache = () => {
    cache.clear()
  }
  
  return {
    loading: readonly(loading),
    error: readonly(error),
    fetchData,
    invalidateCache,
    clearAllCache
  }
}

// 使用示例
export function useProductList() {
  const { fetchData, loading, error, invalidateCache } = useCache(
    (params) => `products:${JSON.stringify(params)}`,
    (params) => productApi.getList(params),
    { ttl: 10 * 60 * 1000 } // 10分鐘緩存
  )
  
  const products = ref([])
  
  const loadProducts = async (params = {}) => {
    try {
      products.value = await fetchData(params)
    } catch (err) {
      console.error('Failed to load products:', err)
    }
  }
  
  const refreshProducts = (params) => {
    invalidateCache(params)
    return loadProducts(params)
  }
  
  return {
    products: readonly(products),
    loading,
    error,
    loadProducts,
    refreshProducts
  }
}

// ? 錯(cuò)誤的做法：過度響應(yīng)式
export function useBadExample() {
  const heavyData = reactive({
    // 大量復(fù)雜嵌套數(shù)據(jù)
    list: new Array(10000).fill(0).map(i => ({
      id: i,
      details: { /* 復(fù)雜對(duì)象 */ }
    }))
  })
  
  return { heavyData }
}

// ? 正確的做法：按需響應(yīng)式
export function useGoodExample() {
  // 只對(duì)需要響應(yīng)的部分使用reactive
  const selectedIds = ref(new Set())
  const viewMode = ref('list')
  
  // 大量數(shù)據(jù)使用shallowRef
  const heavyData = shallowRef([])
  
  // 計(jì)算屬性只依賴必要的響應(yīng)式數(shù)據(jù)
  const selectedItems = computed(() => {
    return heavyData.value.filter(item => 
      selectedIds.value.has(item.id)
    )
  })
  
  const updateData = (newData) => {
    // 手動(dòng)觸發(fā)更新
    heavyData.value = newData
  }
  
  return {
    selectedIds,
    viewMode,
    selectedItems,
    updateData
  }
}

// plugins/composition-providers.js
export function createCompositionProviders(app) {
  // 全局狀態(tài)提供者
  app.provide('globalStore', createGlobalStore())
  app.provide('userProvider', createUserProvider())
  app.provide('themeProvider', createThemeProvider())
}

// main.js
import { createApp } from 'vue'
import { createCompositionProviders } from './plugins/composition-providers'

const app = createApp(App)
createCompositionProviders(app)
app.mount('#app')

// ? 推薦的命名方式
useUser()         // 用戶相關(guān)邏輯
useAsyncData()    // 異步數(shù)據(jù)處理
useLocalStorage() // 本地存儲(chǔ)
useEventBus()     // 事件總線

// ? 避免的命名方式
getUserHook()     // 冗余的Hook后綴
userLogic()       // 不明確的命名
handleUser()      // 與方法命名混淆