Vue3 composition API实现逻辑复用的方法

当我们使用Vue3进行开发时，使用Vue Composition API可以极大地提升我们的开发效率。这里详细介绍了如何使用Vue3 Composition API实现逻辑复用的方法。

什么是Vue3 Composition API

Vue3 Composition API是一种新的、基于函数的API，它可以让我们更灵活地组织我们的逻辑代码，提高代码的可读性、可维护性和可重用性。在Vue3中，我们可以使用setup来编写我们的组件逻辑代码，setup函数返回一个对象，这个对象包含了我们可以在组件中使用的响应式数据、computed属性、watchers、methods等等。

Vue3如何实现逻辑复用

Vue3 Composition API通过提供自定义Hook实现了逻辑复用。我们可以通过把组件的逻辑代码封装到自定义Hook中，然后在不同的组件中重复使用这些Hook，从而达到逻辑复用的目的。

下面是两个简单的示例，演示了如何使用自定义Hook来实现逻辑复用：

示例1：封装获取数据的逻辑代码

我们经常需要在多个组件中获取数据，如果每个组件中都重复写这段代码，会引起很多冗余代码。此时我们可以把获取数据的代码封装为一个自定义Hook，然后在需要获取数据的组件中调用这个Hook。

import { ref, onMounted } from 'vue'

export function useFetchData(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  async function fetchData() {
    loading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchData()
  })

  return { data, loading, error }
}

在需要获取数据的组件中，只需要调用这个Hook即可获取数据：

import { useFetchData } from './useFetchData'

export default {
  setup() {
    const { data, loading, error } = useFetchData('/api/data')

    return {
      data,
      loading,
      error
    }
  }
}

这样就可以避免重复写获取数据的逻辑代码了。

示例2：封装计数器逻辑

我们经常需要在多个组件中使用计数器，如果每个组件都重复写这段代码，会引起很多冗余代码。此时我们可以把计数器的逻辑代码封装为一个自定义Hook，然后在需要使用计数器的组件中调用这个Hook。

import { ref } from 'vue'

export function useCounter(start = 0, step = 1) {
  const count = ref(start)

  function increment() {
    count.value += step
  }

  function decrement() {
    count.value -= step
  }

  return { count, increment, decrement }
}

在需要使用计数器的组件中，只需要调用这个Hook即可使用计数器：

import { useCounter } from './useCounter'

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

    function handleClick() {
      increment()
    }

    return {
      count,
      handleClick
    }
  }
}

这样就可以避免重复写计数器的逻辑代码了。