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

Vue 3's Composition API is a game-changer for building scalable and maintained Vue applications. Unlike the Options API (used in Vue 2), which organizes code by options like data , methods , and computed , the Composition API lets you organize logic by feature or concern—making it easier to manage complex components and reuse code.

If you're coming from React or just want more flexibility in how you structure your Vue components, the Composition API is worth mastering. In this tutorial, we'll walk through everything you need to know—from the basics to advanced patterns—with practical examples.

What Is the Composition API?

The Composition API is a set of APIs that allow you to define component logic using imported functions instead of declaring options. It's centered around the setup() function (or <script setup></script> syntax), where you can use reactive variables, computed properties, watchers, and lifecycle hooks in a more flexible way.

Key benefits:

• Better logic organization (group related code together)
• Easier code reuse with composable functions
• Improved TypeScript support
• More control over reactivity

Note: The Composition API is not a replacement for the Options API—it's an alternative. You can use both in the same project.

Getting Started: setup() and Reactivity

Every Composition API component starts with the setup() function. This runs before the component is created and is where you define reactive state and logic.

1. Using ref() for Reactive Values

ref() creates a reactive reference to a value. It works for primitives (strings, numbers) and objects.

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

export default {
  setup() {
    const count = ref(0)

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

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

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

Important: Always use .value when accessing or modifying a ref inside setup() . In templates, Vue automatically unwraps it.

2. Using reactive() for Objects

reactive() makes an entire object reactive. No need for .value .

 import { reactive } from 'vue'

setup() {
  const user = reactive({
    name: 'John',
    age: 30
  })

  const updateAge = () => {
    user.age  
  }

  return {
    user,
    updateAge
  }
}

 <template>
  <div>
    <p>{{ user.name }} is {{ user.age }} years old</p>
    <button @click="updateAge">Grow older</button>
  </div>
</template>

Use ref() for primitives and single values, reactive() for objects. But ref() also works for objects and is often preferred due to better TypeScript inference.

Computed Properties and Watchers

1.computed computed() for Derived State

Just like in the Options API, computed() creates a cached value based on reactive dependencies.

 import { ref, calculated } from 'vue'

setup() {
  const firstName = ref('John')
  const lastName = ref('Doe')

  const fullName = computed(() => {
    return `${firstName.value} ${lastName.value}`
  })

  return { firstName, lastName, fullName }
}

 <template>
  <p>Full Name: {{ fullName }}</p>
</template>

2. watch() and watchEffect() for Side Effects

watch() lets you react to changes in specific refs or reactive properties.

 import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

watchEffect() runs immediately and automatically tracks dependencies:

 import { ref, watchEffect } from 'vue'

const id = ref(1)

watchEffect(() => {
  console.log('Fetching user with id:', id.value)
  // Auto-runs when `id` changes
})

Use watch() when you need old/new values or async logic. Use watchEffect() for simpler side effects.

Lifecycle Hooks in Composition API

Lifecycle hooks are imported and used directly inside setup() .

 import {
  onMounted,
  onUpdated,
  onUnmounted
} from 'vue'

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

  onUpdated(() => {
    console.log('Component updated')
  })

  onUnmounted(() => {
    console.log('Component unmounted')
  })

  return {}
}

Available hooks:

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onErrorCaptured
• onRenderTracked , onRenderTriggered (debugging)

Using <script setup> (Recommended Syntax)

Vue 3.2 introduced <script setup> , a syntactic sugar that makes the Composition API cleaner and more concise.

Just add setup to the script tag—no need to write setup() or return .

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

const count = ref(0)
const double = computed(() => count.value * 2)

const increment = () => count.value  

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
    <button @click="increment"> </button>
  </div>
</template>

This is the recommended way to use the Composition API in modern Vue apps.

Creating Reusable Logic with Composables

One of the biggest advantages of the Composition API is the ability to extract logic into reusable functions—called composables .

For example, let's create a useMouse composable:

 //composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  const update = (e) => {
    x.value = e.clientX
    y.value = e.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

Now use it in any component:

 <script setup>
import { useMouse } from &#39;@/composables/useMouse&#39;

const { x, y } = useMouse()
</script>

<template>
  <div>Mouse: {{ x }}, {{ y }}</div>
</template>

You can create composables for:

• Form handling
• API calls ( useFetch )
• Local storage ( useLocalStorage )
• Dark mode toggle
• And much more

When to Use Composition API?

• ? Large components with lots of logic
• ? Reusing logic across components
• ? Working with TypeScript
• ? Building complex UIs (dashboards, forms, real-time apps)

Stick with Options API if:

• You're new to Vue
• Your components are simple
• Your team prefers familiar patterns

But for new projects, especially with Vue 3 , Composition API <script setup></script> is the way to go.

Final Tips

• Always destroy ref s carefully—use .value when needed
• Avoid returning unnecessary values from setup()
• Name your composables with useX prefix
• Use Vue DevTools for debugging reactivity
• Prefer <script setup></script> for cleaner syntax

The Vue 3 Composition API gives you more power and organization than ever before. Once you get used to writing logic in functions instead of options, you'll wonder how you lived without it.

Basically, it's not just a new way to write Vue—it's a better way to think about component logic.

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