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>