vue3 Composition API使用示例教程

让我来分享一下关于“Vue3 Composition API使用示例教程”的完整攻略。

什么是Composition API？

Composition API 是 Vue.js 3.x 中一种全新的 API 形式，它允许我们通过一个新的代码组织方式来组织我们的 Vue 组件。使用 Composition API，我们可以通过功能切分的思路更好地组织代码，并更方便地实现一些功能复用。Composition API 是 Vue 3.x 中新增的 API，是 Vue.js 3.x 中新的开发方式，在实现可复用性的同时也更加易于维护。

Composition API 示例1：使用useCounter模拟计数器功能

下面这个示例展示了如何使用 Composition API 来实现计数器的基本功能。

<template>
  <div>
    <h2>{{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

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

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    increment,
    decrement
  }
}

const { count, increment, decrement } = useCounter()
</script>

在示例中，我们首先使用 setup 来引入 Composition API，然后定义了一个 useCounter 函数，该函数返回一个对象，其中包括了 count 和 increment/decrement 两个方法。然后在 setup 中通过扩展操作符将 useCounter 函数返回的对象中的属性都导出来，从而能够在模板中直接使用。

Composition API 示例2：使用useFetch使用Fetch数据

下面这个示例展示了如何使用 Composition API 使用 Fetch 方法来获取远程数据。

<template>
  <div>
    <h2>Posts:</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

function useFetch(url) {
  const data = ref([])

  onMounted(async () => {
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (error) {
      console.error(error)
    }
  })

  return data
}

const posts = useFetch('https://jsonplaceholder.typicode.com/posts')
</script>

在这个示例中，我们同样使用了 setup，在 setup 中定义了一个 useFetch 函数，该函数接受一个远程调用的 URL 并返回一个 ref 对象，其中默认值为空数组。然后我们利用 onMounted 钩子在组件挂载后开始加载数据（这里用到了 async/await 语法），并将数据存储在 ref 对象中。最后在模板中使用 v-for 指令来循环渲染数据。

这两个示例展示了如何使用 Composition API 来完成常见的任务，其余的功能也可以通过类似的方式来完成。