Composition API 如何实现逻辑复用

这样做的

• 抽离逻辑代码到一个函数
• 函数命名约定为 useXxxx 格式 （React Hooks 也是）

列子，useMousePosition.js

import {ref, onMounted, onUnmounted} from "vue";

function useMousePosition() {
  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
  }
}

export default useMousePosition

在组件中使用

<template>
  <p>mouse position {{ x }}-{{ y }}</p>
</template>

<script>

import useMousePosition from "./useMousePosition.js";

export default {
  name: "MousePosition",
  setup() {
    const {x, y} = useMousePosition()

    return {
      x, y
    }
  }
}
</script>