- 抽离逻辑代码到一个函数
- 函数命名约定为 useXxxx 格式(React Hooks 也是)
- 在 setup 中引用 useXxxx 函数
代码演示:
<template>
<p>MousePosition {
{ x }}--{
{ y }}</p>
</template>
<script>
import useMousePosition from './useMousePosition'
export default {
name: 'MousePosition',
setup() {
const { x, y } = useMousePosition()
return {
x,
y
}
}
}
</script>
<!--useMousePosition.js-->
import { ref, reactive, onMounted, onUnmounted, toRefs } from 'vue'
function useMousePosition() {
const x = ref(0)
const y = ref(0)
function update(e) {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => {
console.log('useMousePosition mounted')
// 添加事件监听
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
console.log('useMousePosition unmounted')
// 移除事件监听,否则每次加载都会添加事件,容易内存泄漏
window.removeEventListener('mousemove', update)
})
return {
x,
y
}
}
/* function useMousePosition2() {
const state = reactive({
x: 0,
y: 0
})
function update(e) {
state.x = e.pageX
state.y = e.pageY
}
onMounted(() => {
console.log('useMousePosition mounted')
// 添加事件监听
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
console.log('useMousePosition unmounted')
// 移除事件监听,否则每次加载都会添加事件,容易内存泄漏
window.removeEventListener('mousemove', update)
})
return toRefs(state)
} */
export default useMousePosition