vue3中hooks的使用

vue3中的hooks是，类似于vue2中的mixin。

但是不同的是，vue3的hooks是一个函数。

可以帮助我们去复用一些重复的代码，提升开发效率。

计数器 hook

1、定时器

src下新建hook目录，新建useCounter.js

src --> hook --> useCounter.js

import { ref } from "vue";  // 使用ref定义响应式数据
export default function () { // 默认抛出一个函数，hooks本质就是一个函数
  let counter = ref(0); // 定义计数器为0
  // 点击事件 将定时器++
  function clickNum() {
    counter.value++;
  }
  // 一定要return 出去 否则无法使用
  return { counter, clickNum };
}

在需要用到的组件中引入并调用函数。

拿到函数的返回值。

src --> App.vue

import useCounter from "./hook/usePageNum";
export default{
    setup(){
      //执行useCounter函数,拿到counter,clickNum
      let {counter,clickNum} = useCounter()
      return {
          // 模板中使用，需要return 出去
          counter,
          clickNum
      }
    }
}

<template>
    <div>{{ counter }}</div>
    <div>
    <button @click="clickNum">counter++</button>
    </div>
</template>

至此，计数器hook实现，下面我们来实现点击当前页面获取鼠标的坐标。

2、点击页面获取x，y轴坐标

src下新建hook目录，新建useCoordinates.js

src --> hook --> useCoordinates.js

import { ref } from "vue";
export default function () {
  // 保存x，y轴的坐标位置
  let x = ref("");
  let y = ref("");

  // 鼠标点击事件
  window.addEventListener("click", (e) => {
    x.value = e.pageX;
    y.value = e.pageY;
  });

  return {
    x,
    y,
  };
}

src --> App.vue

<template>
  <div>x坐标：{{ x }},y坐标：{{ y }}</div>
</template>

<script>
import useCoordinates from "./hook/useCoordinates.js";
export default {
  setup() {
    let { x, y } = useCoordinates();
    return {
      x,
      y,
    };
  },
};
</script>