博客站

Vue 3 的 Hook 是一种函数，允许你在 Vue 组件中使用状态和生命周期特性，而无需使用类组件。它借鉴了 React 的 Hook 概念，提供了一种更灵活的方式来组织和复用逻辑。

常见的 Vue 3 Hook

1. ref

   • 用于创建一个响应式数据对象，通常用于基本类型（如字符串、数字等）。
   • 示例：

     import { ref } from 'vue';
     
     const count = ref(0);
     

2. reactive

   • 用于创建一个响应式对象，适用于复杂数据结构（如对象、数组等）。
   • 示例：

     import { reactive } from 'vue';
     
     const state = reactive({
       count: 0,
       name: 'Vue 3'
     });
     

3. computed

   • 用于创建计算属性，依赖其他响应式数据并自动更新。
   • 示例：

     import { ref, computed } from 'vue';
     
     const count = ref(0);
     const doubled = computed(() => count.value * 2);
     

4. watch

   • 用于监听响应式数据的变化，并在变化时执行回调函数。
   • 示例：

     import { ref, watch } from 'vue';
     
     const count = ref(0);
     watch(count, (newValue, oldValue) => {
       console.log(`count changed from ${oldValue} to ${newValue}`);
     });
     

5. onMounted

   • 用于在组件挂载后执行代码。
   • 示例：

     import { onMounted } from 'vue';
     
     onMounted(() => {
       console.log('Component is mounted');
     });
     

6. onUnmounted

   • 用于在组件卸载时执行清理操作。
   • 示例：

     import { onUnmounted } from 'vue';
     
     onUnmounted(() => {
       console.log('Component is unmounted');
     });
     

自定义 Hook

你可以将多个 Hook 组合成一个自定义 Hook，以便在多个组件中复用逻辑。例如：

import { ref, onMounted, onUnmounted } from 'vue';

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

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

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

  return { x, y };
}

在组件中使用自定义 Hook：

import { useMousePosition } from './useMousePosition';

export default {
  setup() {
    const { x, y } = useMousePosition();
    return { x, y };
  }
};

总结

Vue 3 的 Hook 提供了一种灵活的方式来管理组件状态和生命周期，使代码更易维护和复用。通过 ref、reactive、computed、watch 等 Hook，以及自定义 Hook，开发者可以更高效地构建 Vue 应用。