Composition API 实现逻辑复用（笔记自用）

• 抽离逻辑代码到一个函数
• 函数命名约定为 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