深入理解 Vue 3 Composition API：高级 Hooks 技巧

Vue 3 引入了 Composition API，它是一种全新的组织组件代码的方式，允许开发者更加灵活地管理组件的状态和逻辑。Composition API 基于 Vue 3 的 Reactivity 系统，提供了一系列 Hooks，用于组织和共享逻辑。在本文中，我们将深入探讨 Vue 3 Composition API 的高级技巧，并提供一个复杂的案例，以展示如何更好地利用 Hooks 来构建功能丰富的组件。

高级 Hooks 技巧

1. 自定义 Hooks

Vue 3 Composition API 允许你创建自定义 Hooks，以封装和共享特定功能。这可以帮助你将代码模块化，并在多个组件中复用逻辑。

javascript 复制代码

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

export function useCounter(initialValue) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  return { count, increment };
}

在组件中使用自定义 Hook：

javascript 复制代码

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter(0);
    return { count, increment };
  },
};
</script>

2. 组合多个 Hooks

你可以使用多个 Hook 来组合不同的功能，从而更好地管理组件的状态和逻辑。这种方式可以使代码更清晰和模块化。

javascript 复制代码

// useUser.js
import { ref, computed } from 'vue';

export function useUser() {
  const name = ref('John');
  const age = ref(30);

  const isAdult = computed(() => age.value >= 18);

  return { name, age, isAdult };
}

javascript 复制代码

// MyComponent.vue
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <p>Is Adult: {{ isAdult }}</p>
  </div>
</template>

<script>
import { useCounter } from './useCounter';
import { useUser } from './useUser';

export default {
  setup() {
    const { count, increment } = useCounter(0);
    const { name, age, isAdult } = useUser();

    return { count, increment, name, age, isAdult };
  },
};
</script>

3. 生命周期钩子

Vue 3 Composition API 提供了 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 等生命周期钩子，用于在组件的不同生命周期阶段执行特定操作。这些钩子可以替代 Vue 2 中的 Options API 中的生命周期方法。

javascript 复制代码

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3');

    onMounted(() => {
      console.log('Component has been mounted');
    });

    return { message };
  },
};

复杂案例：TodoList

让我们通过一个复杂的案例来展示 Vue 3 Composition API 的强大之处。我们将构建一个 TodoList 组件，包括添加任务、标记完成、删除任务等功能。

vue 复制代码

<template>
  <div>
    <input v-model="newTodo" @keydown.enter="addTodo" placeholder="Add a new task" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="{ done: todo.completed }" @click="toggleComplete(index)">{{ todo.text }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    function addTodo() {
      if (newTodo.value) {
        todos.value.push({ text: newTodo.value, completed: false });
        newTodo.value = '';
      }
    }

    function toggleComplete(index) {
      todos.value[index].completed = !todos.value[index].completed;
    }

    function deleteTodo(index) {
      todos.value.splice(index, 1);
    }

    return { newTodo, todos, addTodo, toggleComplete, deleteTodo };
  },
};
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

在这个案例中，我们使用了多个 Hooks，包括 ref、v-model、事件监听、条件渲染等，来构建一个功能丰富的 TodoList 组件。这展示了 Vue 3 Composition API 如何使组件更加模块化、可维护和易于理解。

结语

Vue 3 Composition API 引入了一种新的组织组件代码的方式，允许开发者更灵活地管理组件的状态和逻辑。高级 Hooks 技巧，如自定义 Hooks、组合多个 Hooks 和生命周期钩子，使我们能够构建复杂的组件，并更好地组织和共享逻辑。