Vue3 Composition API的新特性

2023-09-25 15:24:23

Vue 3 Composition API 简介

Vue 3 的 Composition API 是一种新的 API，允许开发者以声明式的方式管理组件的状态和行为。它与 Vue 2 的 Options API 不同，Options API 使用一个对象来定义组件，而 Composition API 则使用函数来定义组件。

Composition API 有许多优点，包括：

代码更易读，易于理解和维护。
代码更具模块化，便于复用。
代码更具可测试性，便于编写单元测试。

Composition API 的核心概念

Composition API 的核心概念包括：

ref ：ref 用于创建一个简单的包装对象，将普通的数据类型（如基本类型、对象、数组等）转换为响应式数据。
计算属性 ：计算属性是根据其他响应式数据的变化而计算得出的响应式数据。
侦听器 ：侦听器是当响应式数据发生变化时触发的函数。
生命周期钩子 ：生命周期钩子是在组件的不同生命周期阶段执行的函数。

Composition API 的使用

要使用 Composition API，需要在组件的 setup() 函数中定义响应式数据、计算属性、侦听器和生命周期钩子。setup() 函数返回一个对象，该对象包含组件的状态和行为。

import { ref, computed } from 'vue'

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

    const doubledCount = computed(() => count.value * 2)

    const incrementCount = () => {
      count.value++
    }

    return {
      count,
      doubledCount,
      incrementCount
    }
  }
}