effectScope 可以让不同的组件之间共享相同的依赖存活周期,即可以实现多个组件共享相同状态,并且实现所有的组件都被销毁后触发响应式状态销毁,这样优化了相同的内容重复注册,还共享了数据状态
import {ref, onScopeDispose, effectScope} from 'vue'; export function createSharedComposable(composable) { let subscribers = 0 let state, scope const dispose = () => { if (scope && --subscribers <= 0) { scope.stop() state = scope = null } } return (...args) => { subscribers++ if (!state) { scope = effectScope(true) state = scope.run(() => composable(...args)) } onScopeDispose(dispose) return state } } export let useShareMouse = createSharedComposable(useMouse) export function useMouse() { const x = ref(0) const y = ref(0) function handler(e) { x.value = e.x y.value = e.y } window.addEventListener('mousemove', handler) onScopeDispose(() => { console.log('onUnmounted') window.removeEventListener('mousemove', handler) }) return {x, y} } 