vue3自定义hooks/可组合函数方式

下面详细讲解一下vue3的自定义hooks/可组合函数的完整攻略。

什么是Vue3的自定义Hooks/可组合函数？

Vue3中的自定义Hooks/可组合函数是封装了可重用逻辑的函数。它们可以用于组件之间共享逻辑，这可以帮助我们更好地组织我们的代码，并使我们的应用程序更具可维护性。

Vue3的自定义Hooks/可组合函数使用与Vue2的自定义插件（Custom Plugins）相似的方式封装代码，并且具有更好的类型安全和可读性。

创建Vue3自定义Hooks/可组合函数

在Vue3中，我们可以使用provide和inject来创建自定义Hooks/可组合函数。这两个函数允许我们在父组件中提供数据，并在子组件中使用它们。

例如，我们可以创建一个名为useCounter的可组合函数，该函数将为我们提供一个计数器以及递增计数器的方法：

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  return { count, increment }
}

在上面的代码中，我们使用了Vue3中的ref函数来创建了一个可响应（Reactive）的计数器变量，并返回了一个包含计数器和递增计数器的对象。

然后，我们可以使用provide函数在一个父组件中进行提供：

import { provide } from 'vue'
import { useCounter } from './useCounter'

export default {
  setup() {
    provide('counter', useCounter())
  }
}

在上面的代码中，我们使用了provide函数来将我们的useCounter可组合函数的返回对象提供给父组件。

最后，在我们的子组件中，我们可以使用inject函数来获取useCounter返回的对象:

import { inject } from 'vue'

export default {
  setup() {
    const { count, increment } = inject('counter')
    return { count, increment }
  }
}

在上面的代码中，我们使用了inject函数来获取在父组件中提供的useCounter返回的对象。现在，我们可以在子组件中使用这个计数器和递增函数了。

另一个示例：使用Vue3的自定义Hooks/可组合函数获取浏览器窗口大小

我们可以使用Vue3的自定义Hooks/可组合函数来获取浏览器窗口的大小，并在父组件和子组件之间共享这些数据。这个示例中，我们将创建一个名为useWindowSize的可组合函数来获取窗口大小：

import { ref, onMounted, onUnmounted } from 'vue'

export function useWindowSize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const updateWindowSize = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => {
    window.addEventListener('resize', updateWindowSize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateWindowSize)
  })

  return { width, height }
}

在上面的代码中，我们使用Vue3的生命周期钩子onMounted和onUnmounted来在组件挂载和卸载时分别添加和删除resize事件监听器。

然后，我们可以使用provide来提供我们的useWindowSize可组合函数的返回对象：

import { provide } from 'vue'
import { useWindowSize } from './useWindowSize'

export default {
  setup() {
    provide('windowSize', useWindowSize())
  }
}

在上面的代码中，我们将我们的useWindowSize函数提供给父组件。

最后，在我们的子组件中，我们可以使用inject函数来获取窗口大小：

import { inject } from 'vue'

export default {
  setup() {
    const { width, height } = inject('windowSize')
    return { width, height }
  }
}

在上面的代码中，我们使用inject函数来获取在父组件中提供的useWindowSize函数返回的对象。现在，我们可以在子组件中使用窗口的宽度和高度了。

这样，我们就可以通过Vue3的自定义Hooks/可组合函数来获取浏览器窗口大小，并共享这些数据给组件们。这有助于更好地组织我们的代码，并使应用程序更加可维护。