深入讲解Vue 3 hooks实例化机制：每次调用都是新建实例吗？

文
章
目
录

• 一、Vue 3 hooks究竟是什么？
• 二、每次调用useXXX都会新建实例吗？
• 三、真实场景中的应用举例
• （一）不同组件独立使用
• （二）多次调用互不影响
• 四、如果想要全局共享数据该怎么办？
• 五、总结

在学习Vue 3的过程中，很多开发者都对其组合式API（也就是我们常说的hooks）中的一个问题感到困惑：每次调用自定义hooks时，是不是都会新建一个实例呢？多个组件使用相同的hooks时，会不会相互影响呢？别担心，今天这篇文章就带你深入了解，彻底搞懂Vue 3 hooks的实例化机制。

一、Vue 3 hooks究竟是什么？

在Vue 3的开发体系里，hooks通常指的是自定义的组合式函数（Composable）。这些函数一般以use开头，主要作用是封装一些可复用的逻辑。像开发中常见的useMouse、useFetch、useCounter等，都是典型的自定义hooks。

以useMouse为例，下面是它的具体代码实现：

// useMouse.js
import { ref, onMounted, onUnmounted } from \'vue\'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener(\'mousemove\', update))
  onUnmounted(() => window.removeEventListener(\'mousemove\', update))

  return { x, y }
}

在这段代码里，useMouse函数通过ref创建了两个响应式变量x和y，用来记录鼠标的坐标。onMounted和onUnmounted则分别在组件挂载和卸载时，注册和移除鼠标移动事件的监听函数update。最后，将x和y作为对象返回，方便其他组件使用。

二、每次调用useXXX都会新建实例吗？

答案是肯定的！每次调用自定义的hooks，都会创建一套属于自己的响应式数据和副作用。

还是以useMouse为例，来看下面的代码：

const { x, y } = useMouse()
const { x: x2, y: y2 } = useMouse()

这里两次调用useMouse，x/y和x2/y2是完全独立的响应式变量。它们各自会注册自己的mousemove事件监听，在使用过程中，两者互不影响、互不干扰。这就好比你在不同的房间里分别安装了一个独立的传感器，每个传感器只负责监测自己所在房间的情况，不会受到其他房间传感器的影响 。

为什么会这样呢？其实原因很简单，每次调用useMouse函数，就相当于执行了函数内部的所有代码。这和调用普通函数一样，会新建变量、注册副作用。也就是说，每个组件或者每次在setup函数里调用的hooks，都是一个独立的“副本”。

三、真实场景中的应用举例

（一）不同组件独立使用

在实际开发中，不同组件使用相同的hooks时，它们之间的数据是相互独立的。比如在A.vue和B.vue这两个组件中：

// A.vue
const { x, y } = useMouse()

// B.vue
const { x, y } = useMouse()

组件A和组件B虽然都使用了useMouse，但它们各自维护着一份属于自己的鼠标坐标数据，相互之间不会产生干扰。就好像两个不同的用户在各自的电脑上操作鼠标，他们的鼠标位置信息是完全独立的。

（二）多次调用互不影响

即使在同一个组件的setup函数里多次调用相同的hooks，它们之间也是相互独立的。例如：

// 在同一个组件setup里
const mouse1 = useMouse()
const mouse2 = useMouse()

这里的mouse1和mouse2是完全独立的，它们各自的响应式数据和副作用不会相互影响。

四、如果想要全局共享数据该怎么办？

在某些场景下，我们希望多个组件甚至整个应用程序能够共享一份数据。比如，只监听一次鼠标事件，然后所有组件都使用这同一份鼠标坐标数据。这时，就需要把响应式数据和副作用提升到模块作用域，采用全局单例的写法。

下面是一个实现全局共享鼠标坐标数据的示例：

// useGlobalMouse.js
import { ref, onMounted, onUnmounted } from \'vue\'

const x = ref(0)
const y = ref(0)
let isListening = false

function update(e) {
  x.value = e.pageX
  y.value = e.pageY
}

export function useGlobalMouse() {
  if (!isListening) {
    window.addEventListener(\'mousemove\', update)
    isListening = true
  }
  return { x, y }
}

在这个useGlobalMouse函数里，通过在模块作用域中定义x、y和isListening变量，实现了数据的全局共享。isListening用于判断是否已经注册了鼠标移动事件的监听，确保只注册一次。这样，不管在哪个组件里调用useGlobalMouse，获取到的都是同一份响应式数据，并且只会注册一次事件监听。

五、总结

通过以上的分析和示例，我们可以总结出以下几点：

• 每次调用自定义hooks（如useMouse），都会新建一份响应式数据和副作用实例，它们之间互不影响。这保证了每个组件在使用hooks时的独立性和隔离性，避免了数据混乱和相互干扰的问题。
• 如果希望实现全局共享数据，可以把响应式数据和副作用写在模块作用域，采用单例模式。这样就能满足在多个组件之间共享特定数据的需求，同时也能减少不必要的重复操作，比如重复监听事件。
• 深入理解Vue 3 hooks的实例化机制，有助于我们在开发过程中更好地设计hooks逻辑。能够避免出现重复监听事件、数据不一致等问题，提高代码的质量和可维护性。

希望这篇文章能帮助你对Vue 3 hooks的实例化机制有更清晰、更深入的理解。