博客站

在 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. watchEffect

• 用途: 立即执行传入的函数，并响应式地追踪其依赖，依赖变化时重新运行该函数。
• 示例:

  import { ref, watchEffect } from 'vue';
  
  const count = ref(0);
  watchEffect(() => {
    console.log(`count is: ${count.value}`);
  });
  

6. onMounted

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

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

7. onUnmounted

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

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

8. onUpdated

• 用途: 用于在组件更新后执行代码。
• 示例:

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

9. onBeforeMount

• 用途: 用于在组件挂载之前执行代码。
• 示例:

  import { onBeforeMount } from 'vue';
  
  onBeforeMount(() => {
    console.log('Component is about to be mounted');
  });
  

10. onBeforeUpdate

• 用途: 用于在组件更新之前执行代码。
• 示例:

  import { onBeforeUpdate } from 'vue';
  
  onBeforeUpdate(() => {
    console.log('Component is about to be updated');
  });
  

11. onBeforeUnmount

• 用途: 用于在组件卸载之前执行代码。
• 示例:

  import { onBeforeUnmount } from 'vue';
  
  onBeforeUnmount(() => {
    console.log('Component is about to be unmounted');
  });
  

12. provide 和 inject

• 用途: 用于在组件树中提供和注入依赖。
• 示例:

  import { provide, inject } from 'vue';
  
  // 父组件
  provide('theme', 'dark');
  
  // 子组件
  const theme = inject('theme');
  

13. toRef 和 toRefs

• 用途: 用于将响应式对象的属性转换为 ref。
• 示例:

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

总结

Vue 3 提供了丰富的 Hook 函数，使得开发者可以更灵活地管理组件的状态和生命周期。常用的 Hook 函数包括 ref、reactive、computed、watch、watchEffect、onMounted、onUnmounted 等。这些 Hook 函数使得代码更加模块化和可复用，提升了开发效率和代码的可维护性。