【DeepSeek帮我准备前端面试100问】（十五）Vue Hooks详解Vue Hooks 是 Vue 3 引入的一种

Vue Hooks 是 Vue 3 引入的一种新的逻辑复用方式，借鉴了 React Hooks 的概念，但在实现和使用上有自己的特点。下面我将详细介绍 Vue Hooks 的相关知识。

1. 什么是 Vue Hooks

Vue Hooks 是 Vue 3 组合式 API (Composition API) 的核心概念之一，它允许你在组件中提取和复用状态逻辑。与 React Hooks 不同，Vue Hooks 不是真正的"钩子"函数，而是基于 Vue 响应式系统的组合函数。

2. 核心 Hooks

2.1 生命周期 Hooks

Vue 3 提供了与选项式 API 对应的组合式 API 生命周期钩子：

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成')
    })
    
    onUpdated(() => {
      console.log('组件更新完成')
    })
    
    onUnmounted(() => {
      console.log('组件卸载完成')
    })
  }
}

2.2 响应式 Hooks

ref

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}

reactive

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue'
    })
    
    function increment() {
      state.count++
    }
    
    return {
      state,
      increment
    }
  }
}

computed

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    return {
      count,
      doubleCount
    }
  }
}

watch

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })
    
    return {
      count
    }
  }
}

2.3 自定义 Hooks

你可以创建自己的 Hooks 来复用逻辑：

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

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

// 在组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter(10)
    
    return {
      count,
      increment
    }
  }
}

3. Vue Hooks 与 React Hooks 的区别

执行时机：
- Vue Hooks 只在 setup() 中调用一次
- React Hooks 在每次渲染时都会调用
依赖管理：
- Vue 自动追踪依赖，不需要手动声明依赖数组
- React 需要手动声明依赖数组
条件调用：
- Vue Hooks 可以有条件地调用
- React Hooks 必须在顶层无条件调用
响应式系统：
- Vue 基于 Proxy 的响应式系统
- React 基于状态更新的重新渲染

4. 常用第三方 Hooks 库

VueUse：一个强大的 Vue 组合式工具集合

import { useMouse, useLocalStorage } from '@vueuse/core'

export default {
  setup() {
    const { x, y } = useMouse()
    const storedValue = useLocalStorage('my-key', 'default')
    
    return { x, y, storedValue }
  }
}

vue-composition-toolkit：提供更多实用 Hooks

5. 最佳实践

命名约定：自定义 Hooks 应以 use 开头，如 useFetch、useCounter
单一职责：每个 Hook 应该只关注一个特定的功能
组合使用：可以将多个简单 Hooks 组合成更复杂的逻辑
类型支持：使用 TypeScript 可以获得更好的类型提示

// useFetch.ts
import { ref } from 'vue'

interface UseFetchOptions {
  immediate?: boolean
}

export function useFetch<T>(url: string, options: UseFetchOptions = {}) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const loading = ref(false)
  
  async function execute() {
    loading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err as Error
    } finally {
      loading.value = false
    }
  }
  
  if (options.immediate) {
    execute()
  }
  
  return {
    data,
    error,
    loading,
    execute
  }
}

6. 总结

Vue Hooks 通过组合式 API 提供了一种更灵活、更可复用的代码组织方式。它使得逻辑关注点可以更好地分离和组合，提高了代码的可读性和可维护性。随着 Vue 3 的普及，Vue Hooks 已经成为现代 Vue 开发的重要模式。