用五个示例揭示 Vue 3 组合式 API 的强大功能

2023-11-28 13:06:47

组合式 API 是 Vue 3 中的一项重大新特性，它允许您以一种更具组织性和模块化的方式编写组件。组合式 API 提供了一组开箱即用的函数，可让您轻松管理组件的状态、生命周期和事件。

组合式 API 的五大示例

以下是如何使用组合式 API 来构建更强大的 Vue 组件的五个示例：

1. 创建响应式状态

组合式 API 提供了多种方法来创建响应式状态，包括 ref()、reactive() 和 computed() 函数。

import { ref } from 'vue'

const count = ref(0)

这段代码创建了一个名为 count 的响应式变量，其初始值为 0。当 count 发生改变时，任何使用它的组件都会自动更新。

2. 重用代码

组合式 API 还允许您重用代码，包括通过创建自定义指令和混入。

import { directive } from 'vue'

directive('focus', {
  mounted(el) {
    el.focus()
  }
})

这段代码创建了一个名为 focus 的自定义指令，它会在组件挂载时自动聚焦到元素。

3. 优化性能

组合式 API 可以帮助您优化组件的性能，包括通过使用缓存和备忘录来避免不必要的重新计算。

import { computed } from 'vue'

const cachedCount = computed(() => {
  // 昂贵的计算
  return count.value * 2
})

这段代码创建了一个名为 cachedCount 的计算属性，它使用 count 变量的值进行计算。然而，cachedCount 只会在 count 发生改变时重新计算，这可以显著提高性能。

4. 使用 TypeScript

组合式 API 与 TypeScript 完全兼容，这意味着您可以使用 TypeScript 来编写更强大、更健壮的 Vue 组件。

import { Ref } from 'vue'

interface CounterState {
  count: Ref<number>
}

const useCounter = (): CounterState => {
  const count = ref(0)

  return {
    count
  }
}

这段代码使用 TypeScript 创建了一个名为 useCounter 的组合式 API 函数，它返回一个包含 count 变量的 CounterState 对象。

5. 创建更复杂的组件

组合式 API 可以帮助您创建更复杂、更具交互性的组件。

import { ref, watch } from 'vue'

const TodoItem = {
  props: ['todo'],
  setup(props) {
    const completed = ref(props.todo.completed)

    watch(completed, (newValue) => {
      // 当 completed 发生改变时，更新 todo 的状态
      props.todo.completed = newValue
    })

    return {
      completed
    }
  }
}