Vue3 组合式 API 的特性、用法和最佳实践

Vue3 是一种流行的 JavaScript 框架，它引入了全新的组合式 API，在开发大型和复杂的应用程序时提供了更灵活和强大的工具。本文将详细介绍 Vue3 组合式 API 的特性、用法和最佳实践。

什么是组合式 API

组合式 API 是 Vue3 中新增的一种 API 风格，它允许开发者按逻辑关注点（如状态、计算属性、生命周期等）组织代码，而不是按照原来的选项对象方式。通过组合式 API，我们可以更方便地重用逻辑代码，提高代码的可读性和维护性。

setup 函数

在使用组合式 API 之前，我们需要先了解 setup 函数。setup 函数是一个特殊的函数，它是组件的入口点，并在组件创建之前被调用。在 setup 函数中，我们可以访问组件的 props、context 和 attrs 等。

import { ref } from 'vue'

export default {
  props: {
    message: String
  },
  setup(props) {
    const count = ref(0)

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

    return {
      count,
      increment
    }
  }
}

在上述代码中，我们定义了一个名为 count 的响应式变量，并创建了一个名为 increment 的函数。这些变量和函数都可以在模板中使用，或者通过组件实例访问。

ref

在组合式 API 中，我们使用 ref 函数来创建响应式变量。ref 函数接收一个初始值，并返回一个包含 value 属性的对象。要访问或修改响应式变量的值，我们需要通过 .value 进行操作。

import { ref } from 'vue'

export default {
  setup() {
    const name = ref('John Doe')

    const updateName = () => {
      name.value = 'Jane Smith'
    }

    return {
      name,
      updateName
    }
  }
}

在上述代码中，我们创建了一个名为 name 的响应式变量，并定义了一个名为 updateName 的函数来更新其值。

computed

在 Vue3 中，我们可以使用 computed 函数创建计算属性。computed 函数接收一个函数作为参数，并返回一个具有 value 属性的响应式对象。计算属性的值会根据依赖的响应式变量自动更新。

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

在上述代码中，我们创建了两个响应式变量 firstName 和 lastName，并使用 computed 函数创建了一个计算属性 fullName。fullName 的值会根据 firstName 和 lastName 的变化自动更新。

watch

在 Vue3 中，我们可以使用 watch 函数来监听某个响应式变量的变化，并执行相关的逻辑。watch 函数接收两个参数：要监听的响应式变量和回调函数。当被监听的变量发生变化时，回调函数会被触发。

import { ref, watch } from 'vue'

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

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`)
    })

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

    return {
      count,
      increment
    }
  }
}

在上述代码中，我们创建了一个响应式变量 count，并使用 watch 函数监听其变化。当 count 的值发生变化时，回调函数会打印出旧值和新值。

生命周期钩子

在 Vue3 中，生命周期钩子函数发生了一些变化。取而代之的是，我们可以使用 onXxx 的命名约定来定义与生命周期对应的函数。

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}

在上述代码中，我们使用 onMounted 函数定义了组件被挂载后执行的逻辑。类似地，我们可以使用 onUnmounted 函数定义组件被卸载时执行的逻辑。

自定义 Hook

自定义 Hook 是一种常见的开发模式，它可以帮助我们更好地组织和复用逻辑代码。在 Vue3 中，我们可以使用函数来定义自定义 Hook。

import { ref, onMounted } from 'vue'

function useTimer() {
  const timer = ref(null)

  const startTimer = () => {
    timer.value = setInterval(() => {
      console.log('Timer tick')
    }, 1000)
  }

  const stopTimer = () => {
    clearInterval(timer.value)
    timer.value = null
  }

  onMounted(() => {
    startTimer()
  })

  return {
    startTimer,
    stopTimer
  }
}

export default {
  setup() {
    const { startTimer, stopTimer } = useTimer()

    return {
      startTimer,
      stopTimer
    }
  }
}

在上述代码中，我们定义了一个名为 useTimer 的自定义 Hook。该 Hook 提供了 startTimer 和 stopTimer 方法来启动和停止计时器。在 setup 函数中，我们通过解构赋值将这些方法返回给组件。

总结

本文详细介绍了 Vue3 组合式 API 的特性、用法和最佳实践。我们学习了 setup 函数、ref、computed、watch、生命周期钩子和自定义 Hook 等概念。

通过使用组合式 API，我们可以更好地组织和复用代码，提高开发效率和代码质量。