vue3快速入门-自定义hook

本系列文章合集click me

本系列文章源码click me

什么是自定义hook

• 是封装的可复用的功能函数
• 自定义hook类似于vue2中的mixin技术
• 可以使用vue3的composition API

自定义hook的优势

• 复用代码，让setup中的逻辑更清晰
• 清楚复用代码的来源

使用自定义hook

收集用户点击页面坐标的功能函数

• UsePosition.ts

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

export default function useMousePosition() {
    // 初始化坐标
    const x = ref(0);
    const y = ref(0);

    // 挂载后绑定鼠标点击监听
    onMounted(() => {
        window.addEventListener('click', getPosition);
    })

    // 页面销毁前解绑点击监听
    onUnmounted(() => {
        window.addEventListener('click', getPosition);
    })

    // 获取点击鼠标的坐标函数
    const getPosition = (e: MouseEvent) => {
        x.value = e.pageX;
        y.value = e.pageY;
    }

    return { x, y };
}

• diyHook.vue

<template>
  <div id="app">
      <h2>当前鼠标点击坐标</h2>
      <h2>x轴: {{ x }} px</h2>
      <h2>y轴: {{ y }} px</h2>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const { x, y } = useMousePosition();

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