章
目
录
在学习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的实例化机制有更清晰、更深入的理解。
