写 Vue 3 Composition API 指南

2023-10-16 00:50:20

Vue 3 Composition API 入门

Vue 3 Composition API 是一个强大的新工具，可帮助您以更具组织性和模块化的方式编写 Vue 组件。它允许您将组件逻辑分解为更小的、可重用的块，称为“composables”。这使得您的代码更容易阅读和维护，并且可以更容易地跨组件共享逻辑。

要开始使用 Composition API，您需要在您的 Vue 项目中安装 @vue/composition-api 包。您还可以使用 setup 选项在您的 Vue 组件中启用 Composition API。

import { createApp } from 'vue'
import { setup } from '@vue/composition-api'

const app = createApp({
  setup() {
    // 您的 Composition API 代码在这里
  }
})

使用 Composition API 构建 Vue 组件

使用 Composition API 构建 Vue 组件非常简单。首先，您需要创建一个新的 composable 函数。这个函数将包含组件的逻辑。

import { ref } from '@vue/composition-api'

export const useCounter = () => {
  const count = ref(0)

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

  return {
    count,
    increment
  }
}

然后，您可以在您的 Vue 组件中使用这个 composable 函数。

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

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()

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

使用 Composition API 与 TypeScript 一起工作

您也可以使用 Composition API 与 TypeScript 一起工作。要做到这一点，您需要在您的 TypeScript 配置文件中启用 vueJsx 选项。

{
  "compilerOptions": {
    "jsx": "react",
    "vueJsx": true
  }
}

然后，您就可以在您的 Vue 组件中使用 TypeScript 语法了。

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

<script lang="ts">
import { ref } from '@vue/composition-api'

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

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

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