How can you use composition API in Vue 3 to create reusable logic?

How can you use composition API in Vue 3 to create reusable logic?

The Composition API in Vue 3 is a powerful feature that allows developers to organize and reuse logic across components more effectively. To use the Composition API for creating reusable logic, you can follow these steps:

1. Define a Composition Function: Start by creating a function that encapsulates the logic you want to reuse. This function is often referred to as a "composition function" or "custom hook." Inside this function, you can use ref, reactive, computed, watch, and other Composition API functions to manage state and side effects.
2. Use Reactive References: Within your composition function, use ref or reactive to create reactive data. For example, if you're creating a function to handle form validation, you might use ref to track the validity of the form.
3. Return Values: The composition function should return an object containing the reactive references and any methods that other components might need. This allows components using the function to access and manipulate the state.
4. Import and Use in Components: In your Vue components, import the composition function and call it within the setup function. You can then use the returned values within your component's template or other parts of the component.

Here's a simple example of a composition function for managing a counter:

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

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

  function increment() {
    count.value  ;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement
  };
}

You can then use this in a component like this:

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

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

export default {
  setup() {
    const { count, increment, decrement } = useCounter();

    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

What are the benefits of using the Composition API for organizing code in Vue 3?

The Composition API offers several benefits for organizing code in Vue 3:

1. Improved Code Organization: The Composition API allows you to group related logic together, making it easier to manage and understand complex components. Instead of spreading logic across multiple lifecycle hooks and methods, you can encapsulate it within a single function.
2. Reusability: With the Composition API, you can create custom hooks that can be reused across multiple components. This reduces code duplication and makes it easier to maintain your application.
3. Better TypeScript Support: The Composition API is designed with TypeScript in mind, making it easier to type-check your code and catch errors early in the development process.
4. Easier Logic Extraction: If you need to extract logic from a component, the Composition API makes it straightforward to move that logic into a separate function without affecting the rest of the component.
5. More Intuitive State Management: The Composition API provides a more intuitive way to manage state and side effects, especially in larger applications where state management can become complex.

How does the Composition API improve state management in Vue 3 applications?

The Composition API improves state management in Vue 3 applications in several ways:

1. Centralized State Logic: With the Composition API, you can centralize state-related logic within a single function. This makes it easier to understand and manage the state of your application, as all related logic is grouped together.
2. Reactive State: The Composition API provides ref and reactive functions to create reactive state. This allows you to easily create and manage reactive data, which automatically updates the UI when the state changes.
3. Computed Properties and Watchers: The Composition API makes it easy to create computed properties and watchers. Computed properties can be used to derive new state from existing state, while watchers can be used to react to state changes.
4. Easier State Sharing: By using custom hooks, you can share state and logic between components more easily. This is particularly useful for managing global state or state that needs to be shared across multiple components.
5. Lifecycle Hooks: The Composition API provides lifecycle hooks like onMounted, onUpdated, and onUnmounted, which can be used within composition functions to manage side effects related to state.

Can you provide an example of how to implement a reusable custom hook with the Composition API in Vue 3?

Here's an example of a reusable custom hook that manages a todo list:

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

export function useTodoList() {
  const todos = ref([]);

  function addTodo(todo) {
    todos.value.push(todo);
  }

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

  const completedTodos = computed(() => todos.value.filter(todo => todo.completed));

  const pendingTodos = computed(() => todos.value.filter(todo => !todo.completed));

  return {
    todos,
    addTodo,
    removeTodo,
    completedTodos,
    pendingTodos
  };
}

You can then use this custom hook in a Vue component like this:

// TodoList.vue
<template>
  <div>
    <h2 id="Todo-List">Todo List</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        {{ todo.text }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <button @click="addTodo">Add Todo</button>
    <p>Completed Todos: {{ completedTodos.length }}</p>
    <p>Pending Todos: {{ pendingTodos.length }}</p>
  </div>
</template>

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

export default {
  setup() {
    const { todos, addTodo, removeTodo, completedTodos, pendingTodos } = useTodoList();
    const newTodo = ref('');

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

    return {
      todos,
      newTodo,
      addTodo,
      removeTodo,
      completedTodos,
      pendingTodos
    };
  }
};
</script>

This example demonstrates how to create a reusable custom hook for managing a todo list, and how to use it within a Vue component. The custom hook encapsulates the logic for managing the todo list, making it easy to reuse across different components.

The above is the detailed content of How can you use composition API in Vue 3 to create reusable logic?. For more information, please follow other related articles on the PHP Chinese website!