Composition API实现逻辑复用
- 抽离逻辑代码到一个函数
- 函数命名约定为useXxxx格式（react Hooks也是）
- 在setup中去引用这个函数
如下经典鼠标位置例子：
// useMousePosition.ts
import { onMounted, onUnmounted, ref } from "vue";const useMousePosition = () => {const x = ref(0);const y = ref(0);function mousemoveHandler(e: MouseEvent) {x.value = e.pageX;y.value = e.pageY;}onMounted(() => window.addEventListener('mousemove', mousemoveHandler));onUnmounted(() => window.removeEventListener('mousemove', mousemoveHandler));return { x, y }
}
export default useMousePosition;
// index.vue
<template><div>position - x: {{ x }}, y: {{ y }}</div>
</template><script lang="ts">
import useMousePosition from './useMousePosition';export default {setup() {const { x, y } = useMousePosition()return {x,y}}
}
</script>