Vue 3 引入了 Composition API,它是一种全新的组织组件代码的方式,允许开发者更加灵活地管理组件的状态和逻辑。Composition API 基于 Vue 3 的 Reactivity 系统,提供了一系列 Hooks,用于组织和共享逻辑。在本文中,我们将深入探讨 Vue 3 Composition API 的高级技巧,并提供一个复杂的案例,以展示如何更好地利用 Hooks 来构建功能丰富的组件。
// useCounter.js // 堆代码 duidaima.com import { ref } from 'vue'; export function useCounter(initialValue) { const count = ref(initialValue); function increment() { count.value++; } return { count, increment }; }在组件中使用自定义 Hook:
// 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
// 堆代码 duidaima.com // 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 }; }
// 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. 生命周期钩子
import { ref, onMounted } from 'vue'; export default { setup() { const message = ref('Hello, Vue 3'); onMounted(() => { console.log('Component has been mounted'); }); return { message }; }, };复杂案例:TodoList
<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 如何使组件更加模块化、可维护和易于理解。