vue3 组合式 API 之 setup 函数介绍

2024-01-10 02:34:09

为什么使用组合式 API

在 vue3 中，组合式 API 是一个新的 API 集合，它可以帮助我们以更加灵活和高效的方式构建组件。相比于传统的选项 API，组合式 API 具有以下几个优势：

更具灵活性： 组合式 API 允许我们以更加灵活的方式组织和管理组件的状态和逻辑，这使得我们能够编写出更具可维护性和可扩展性的代码。
更具模块化： 组合式 API 使我们可以将组件的逻辑分解成更小的、可重用的单元，这使得我们能够更轻松地创建和维护大型项目。
更具可测试性： 组合式 API 使我们可以更轻松地测试组件的逻辑，这有助于提高代码的质量和稳定性。

如何使用组合式 API

在 vue3 中，我们通过 setup 函数来使用组合式 API。setup 函数在创建组件之前被调用，所以在 setup 被执行时，组件实例并没有被创建。

export default {
  setup() {
    // 这里可以定义组件的状态、方法和计算属性
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}

setup 函数的参数

setup 函数可以接受两个参数：

props： 组件的 props 对象。
context： 一个上下文对象，它包含了组件的实例、根节点和插槽等信息。

setup 函数的返回值

setup 函数必须返回一个对象，这个对象包含了组件的状态、方法和计算属性。

状态： 组件的状态是通过 ref 函数定义的，它是一个响应式对象，可以被组件中的任何部分访问和修改。
方法： 组件的方法是通过函数定义的，它们可以被组件中的任何部分调用。
计算属性： 组件的计算属性是通过 computed 函数定义的，它们是根据组件的状态计算出来的值。

setup 函数的应用案例

下面是一个使用 setup 函数构建组件的例子：

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">+</button>
    </div>
  `
}