vue组合式API浅显入门示例详解

我来为你详细讲解“vue组合式API浅显入门示例详解”的攻略。

1. 什么是Vue组合式API

在Vue 3.x版本中，新增了一种API叫做“组合式API”，它能够让我们更加灵活地组织和复用组件逻辑。我们可以使用组合式API来处理一些复杂、高级的场景，或者是为了提高组件的可读性和可维护性。相较而言，Vue 2.x版本中的选项API则更偏向于面向对象的方式去编写。

2. Vue组合式API的使用方式

Vue组合式API主要分为两部分：setup和Composition API。

2.1 setup函数

setup函数是Vue组合式API的入口函数，它会在组件实例化时被调用。setup函数中可以访问到组件实例对象（即this），我们可以在其中进行各种数据的初始化和其他一些操作。

2.2 Composition API

Composition API中包含了多个新的函数，这些函数可以用于组合式的编写方式。它们的使用方式和Vue 2.x的选项API方式大不相同。比较重要的Composition API有以下几个：

1. reactive函数
2. computed函数
3. watchEffect函数
4. ref和toRefs函数
5. provide和inject函数

这些函数都可以使用Vue的reactivity机制，来使得数据响应式地进行管理。

3. Vue组合式API示例

以下是两个简单的示例，用来说明如何使用Vue组合式API。

3.1 示例1：计数器

使用组合式API实现一个简单的计数器功能。

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    function increment() {
      state.count++
    }

    return {
      count: state.count,
      increment
    }
  }
}
</script>

在上面的示例中，我们使用了Vue的reactive函数来创建一个响应式数据对象state，并将其返回到setup函数的返回值中。在组件模板中，我们通过引用响应式数据对象state中的count变量来显示计数器的值。通过在组件模板中，绑定increment函数到一个按钮的点击事件中，可以实现计数器的自加功能。

3.2 示例2：Todo列表

使用组合式API实现一个简单的Todo列表功能。

<template>
  <div>
    <h3>Todo列表</h3>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <div>
      <input v-model="newTodo" />
      <button @click="addItem">添加</button>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      todos: [
        { id: 1, text: '学习Vue 3.x' },
        { id: 2, text: '使用Vue 3.x' },
        { id: 3, text: '编写Vue 3.x组件' }
      ],
      newTodo: ''
    })

    function deleteItem(index) {
      state.todos.splice(index, 1)
    }

    function addItem() {
      state.todos.push({
        id: state.todos.length + 1,
        text: state.newTodo
      })
      state.newTodo = ''
    }

    return {
      todos: state.todos,
      newTodo: state.newTodo,
      deleteItem,
      addItem
    }
  }
}
</script>

在上面的示例中，我们使用Vue的reactive函数来创建一个响应式数据对象state，并将其返回到setup函数的返回值中。在组件模板中，我们使用Vue的指令，将响应式数据对象state中的数组todos中的数据渲染成一个Todo列表。将newTodo数据绑定到input框的v-model中，使得输入的内容能够自动双向绑定到响应式数据对象state的newTodo属性上。通过在组件模板中，绑定deleteItem和addItem函数到删除按钮和添加按钮的点击事件中，可以实现Todo列表的删除和添加功能。

以上是对“vue组合式API浅显入门示例详解”的完整攻略，希望能对你有所帮助。