vue3中mixins不足的解决方案hooks

我们先看一下vue官网提供的mixins不足之处。

同时也提供了解决方案，就是使用组合式api hooks。

vue3 借鉴 react hooks 开发出了 Composition API ，那么也就意味着 Composition API 也能进行自定义封装 hooks。接下来我们就一起写个小demo体验一下。

创建文件夹

在src下创建文件夹。文件名称为hooks。 
hooks下的文件夹下，是你的封装的hook； 
通过命名为useXXXXXX

useMousePosition.ts

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

export default function () {
    const x = ref(0);
    const y = ref(0);
    const clickHandler = (e: MouseEvent) => {
        x.value = e.pageX;
        y.value = e.pageY;
    };
    onMounted(() => {
        window.addEventListener("click", clickHandler);
    });
    onUnmounted(() => {
        window.addEventListener("click", clickHandler);
    });
   
    return { x, y };
}

使用页面

<template>
  <h1>X: {{ x }}, Y: {{ y }}</h1>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import useMousePosition from "./hooks/useMousePosition";

export default defineComponent({
  setup() {
    const { x, y } = useMousePosition();
    
    return { x, y };
  },
});
</script>