vue使用composition相对于mixin的好处

useMousePosition.ts文件，功能是获取鼠标位置

import { onMounted, onUnmounted, ref } from "@vue/runtime-core";

function useMousePosition() {
    const x = ref(0);
    const y = ref(0);

    function getPosition(e:MouseEvent) {
        x.value = e.pageX;
        y.value = e.pageY
    }
    onMounted(() => {
        document.body.addEventListener('click', getPosition)
    });
    onUnmounted(() => {
        document.body.removeEventListener('click', getPosition)
    })
    return  {
        x, // 注意这里的是ref，并不是普通的数值类型，所以具有响应式
        y
    }
}
export default useMousePosition

在使用的时候

import useMousePosition from './../hooks/useMousePosition'
setup() {
    const { x, y } = useMousePosition();
    return {
      x,
      y
    } 
  },

可以看出，这样的好处都有啥：

1. 清楚的知道x, y变量的来源
2. 在使用x, y的时候，可以设置别名，不一定在使用时候非得叫x, y，避免了命名冲突
3. 将功能抽离出去暴露成一个函数，更加清晰、灵活