亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Vue 3's Composition API is one of the most impactful additions to the framework, offering a more flexible and scalable way to organize component logic. While the Options API (used in Vue 2 and still supported in Vue 3) groups code by options like data , methods , and computed , the Composition API lets you group code by logical concerns—making it easier to manage complex components and reuse logic across components.

Let's break down what the Composition API is, why it matters, and how to use it effectively.

What Is the Composition API?

The Composition API is a set of APIs that allows you to compose component logic using imported functions rather than defining options in a component object. It's centered around the setup() function (or <script setup></script> syntax), which runs before a component is created and serves as the entry point for using Composition API features.

Key functions include:

• ref() – for reactive primitive values
• reactive() – for reactive objects
• computed() – for derived state
• watch() and watchEffect() – for observing changes
• onMounted() , onUpdated() , etc. – for lifecycle hooks

Instead of scattering related logic across different options, you can keep it together in setup() .

Why Use the Composition API?

1. Better Logic Organization

In large components, the Options API can become hard to follow. For example, if you have a user-fetching feature, its data, methods, and watchers might be split across data , methods , and watch . With the Composition API, all that logic lives together.

 // Inside setup()
function useUser(userId) {
  const user = ref(null);
  const loading = ref(false);

  const fetchUser = async () => {
    loading.value = true;
    const res = await fetch(`/api/users/${userId}`);
    user.value = await res.json();
    loading.value = false;
  };

  watch(userId, fetchUser); // React to changes

  onMounted(fetchUser);

  return { user, loading, fetchUser };
}

Now all user-related logic is encapsulated in a composable function ( useUser ), which can be reused across components.

2. Reusability with Composables

The Composition API enables creating composable functions — reusable logic units that can share state, effects, and logic without relying on patterns like mixins (which can cause naming conflicts and unclear dependencies).

For example, a useLocalStorage composable:

 function useLocalStorage(key, initialValue) {
  const value = ref(
    JSON.parse(localStorage.getItem(key)) || initialValue
  );

  watch(value, () => {
    localStorage.setItem(key, JSON.stringify(value.value));
  });

  return value;
}

Used in any component:

 const username = useLocalStorage('username', 'guest');

This is cleaner and safer than mixins.

3. Better TypeScript Support

The Composition API was designed with TypeScript in mind. Type inference works more predictably with ref and reactive , especially when logic is grouped in functions.

How to Use the Composition API: Syntax Options

Vue 3 offers two main ways to use the Composition API:

1. Standard setup() Function

 <script>
import { ref, onMounted } from &#39;vue&#39;;

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value;

    onMounted(() => {
      console.log(&#39;Component mounted&#39;);
    });

    return {
      count,
      Increment
    };
  }
};
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

This is explicit and clear but can feel verbose.

2. <script setup> (Recommended)

A syntactic sugar that makes the Composition API more concise. It's a compile-time macro that automatically exposes everything declared in the script to the template.

 <script setup>
import { ref, onMounted } from &#39;vue&#39;;

const count = ref(0);
const increment = () => count.value;

onMounted(() => {
  console.log(&#39;Mounted!&#39;);
});
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

No need to manually return values. Everything top-level is automatically available in the template.

? Tip: Use defineProps , defineEmits , and defineExpose for component interfaces in <script setup> .

Key Concepts and Best Practices

1. ref vs reactive

• Use ref for primitives ( number , string , boolean ) and when you need to reassign the entire value.
• Use reactive for objects and when you're working with nested properties.

Note: ref values are automatically unwrapped inside templates and in the deps list of watch / computed .

 const count = ref(0);
console.log(count.value); // Need .value in JS

const state = reactive({ count: 0 });
console.log(state.count); // No .value needed

2. Avoid Destructuring ref

Don't destroy reactive objects created with reactive , as it breaks reactive:

 const state = reactive({ count: 0, name: 'Vue' });
let { count } = state; // ? Loses reactivity

Instead, use toRefs() :

 const state = reactive({ count: 0, name: 'Vue' });
const { count, name } = toRefs(state); // ? refs preserved

Now count and name are refs and stay reactive.

3. Use Composables for Cross-Cutting Concerns

Group related logic into functions like:

• useMouse() – track mouse position
• useFetch() – handle API calls
• useForm() – manage form state and validation

These promote clean, testable, and reusable code.

When to Use Composition API vs Options API

• Use Composition API when:

  • Building large or complex components
  • You want to extract and reuse logic
  • You're using TypeScript
  • You prefer functional organization

• Stick with Options API when:

  • Building simple components
  • Migrating from Vue 2
  • Your team is more comfortable with object-based syntax

But note: Composition API is the future direction of Vue . The Vue core team encourages its use for new projects.

Final Thoughts

The Composition API doesn't replace the Options API—it complements it. You can even mix both in the same component. But for organizing complex logic and building scalable applications, the Composition API shines.

With <script setup></script> , composables, and better TypeScript integration, Vue 3 gives you the tools to write cleaner, more maintained code. Start small: extract one piece of logic into a composable, then gradually adopt the pattern across your app.

Basically, if you're building anything beyond a simple component, the Composition API is worth diving into.

The above is the detailed content of A Deep Dive into the Vue 3 Composition API. For more information, please follow other related articles on the PHP Chinese website!