Understanding the Vue omposition API

Vue 3 Composition API: a powerful tool to improve code organization and reusability

Vue 3’s Composition API provides a powerful code structure and organization method, giving developers greater flexibility and control. While the Options API is still the first choice for many, the Composition API provides a modern approach that is superior in terms of extensibility and reusability.

This guide will take a deep dive into the core concepts of the Composition API and show you how to use it effectively in your Vue 3 application.

Before we begin, let’s first understand the advantages of the Composition API:

Advantages of Composition API:

The Composition API is a feature introduced in Vue 3 that allows developers to organize code according to logical concerns, rather than by component options (such as data, methods, and computed) like the Options API. It leverages functions and reactive primitive types to encapsulate and reuse logic.

The main advantages are:

1. Better code organization: Logic is grouped by function, not by option.
2. Reusability: Use composables to easily extract and reuse logic across components.
3. Scalability: Simplifies the management of large components by reducing code redundancy.
4. TypeScript Friendly: Works seamlessly with TypeScript for improved type safety.

The Composition API is ideal for large projects, components with complex logic, or/and teams looking to improve code reusability and readability.

Core concepts of Composition API:

To take advantage of the full potential of the Composition API, you should understand the following core concepts:

1. Responsive state management

ref is used to create a reactive reference to a single value. Use .value to access or modify the value.

<code class="language-javascript">import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template></code>

(The difference between ref and reactive is omitted here)

2. Computed properties

computed is used to create reactive derived data based on other reactive values.

<code class="language-javascript">import { ref, computed } from 'vue';

const count = ref(0);

const double = computed(() => count.value * 2);
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
  </div>
</template></code>

3. Watchers

watch is used to observe reactive values ​​and perform actions when they change.

<code class="language-javascript">import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template></code>

4. Life cycle hook

Composition API provides life cycle hook functions equivalent to Options API.

<code class="language-javascript">import { onMounted, onUnmounted } from 'vue';

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

onUnmounted(() => {
  console.log('Component unmounted');
});</code>

5. Combined functions (Composables)

A combined function is a reusable function that encapsulates logic. It is the cornerstone of Composition API reusability.

Combined function example: counter logic

<code class="language-javascript">// useCounter.js
import { ref } from 'vue';

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

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

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

Use combined functions:

<code class="language-javascript">import { useCounter } from './useCounter';

const { count, increment, decrement } = useCounter();
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template></code>

(Links to Vue composed function best practices and design patterns omitted here)

In-depth learning:

To learn more about Vue, Nuxt, JavaScript or other practical technologies, please click the following link to visit VueSchool:

Summary:

The Vue 3 Composition API provides a modern, flexible way to handle state and logic, making your application easier to scale and maintain. By understanding and using reactive primitives, computed properties, listeners, and composed functions, you can write cleaner, more reusable code.

Start trying the Composition API today and unleash its full potential!

Happy coding!

The above is the detailed content of Understanding the Vue omposition API. For more information, please follow other related articles on the PHP Chinese website!