使用 Vue3 的组合 API 封装的可复用的功能函数

  1. 一定要用 use 开头，这样才能区分出什么是组件，什么是自定义函数；
  2. 作用类似于 vue2 中的 mixin 混入技术；
  3. 优势: 很清楚复用功能代码的来源, 更清楚易懂；

需求：收集用户鼠标点击的页面坐标

  1. app.vue

    <template>
	<h2>自定义hook函数操作</h2>
	<h2>x:{{ x }},y:{{ y }}</h2>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import useMousePosition from "./hooks/useMousePosition.js";
export default defineComponent({
	name: "App",
	setup() {
	const { x, y } = useMousePosition();
	return { x, y };
	},
});
</script>

  2. useMousePosition.js

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

export default function() {
	const x = ref(-1);
	const y = ref(-1);

	// 点击事件的回调函数
	const clickHandler = (event: MouseEvent) => {
		x.value = event.pageX;
		y.value = event.pageY;
	};

	// 页面已经加载完毕了，再进行点击的操作
	// 页面加载完毕的生命周期组合 API
	onMounted(() => {
		window.addEventListener("click", clickHandler);
	});

	// 页面卸载之前的生命周期组合API
	onBeforeUnmount(() => {
		window.removeEventListener("click", clickHandler);
	});

	return { x, y };
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 使用 Vue3 的组合 API 封装的可复用的功能函数
  2. 2. 需求：收集用户鼠标点击的页面坐标