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 };
}

2、拿到函数的返回值，src --> App.vue

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

    {{ counter }}



    counter++

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

3、点击页面获取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

    x坐标：{{ x }},y坐标：{{ y }}