源码介绍
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 }}
至此，计数器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 }}
本站所有软件均来源于网络，仅供学习使用，请支持正版，如有侵权，联系删除！
×
微信扫一扫分享