逻辑复用-组合式函数
src/views/ad/User.vue
<script setup> import { useMouse } from "../../js/mouse.js"; import { useFetch } from "../../js/fetch.js"; import { ref, computed } from "vue"; //组合式函数 const { x, y } = useMouse(); // x 和 y 是两个 ref const todoId = ref(1); const url = computed(() => { return `https://jsonplaceholder.typicode.com/todos/${todoId.value}`; }); const { data, error } = useFetch(url); </script> <template> <div> <div> <p>Mouse position is at: {{ x }}, {{ y }}</p> </div> <div> <p>id:{{ todoId }}</p> <button @click="todoId++">Fetch next todo</button> <p v-if="!data">Loading...</p> <pre v-else-if="error">{{ error }}</pre> <pre v-else>{{ data }}</pre> </div> </div> </template> <style scoped> </style>
src/js/fetch.js
import { ref, watchEffect, toValue } from "vue"; export function useFetch(url) { const data = ref(null); const error = ref(null); const fetchData = (dt) => { fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)); }; watchEffect(() => { fetchData(url); }); return { data, error }; }
src/js/mouse.js
import { ref } from "vue"; import { useEventListener } from "./event"; export function useMouse() { const x = ref(0); const y = ref(0); useEventListener(window, "mousemove", (event) => { x.value = event.pageX; y.value = event.pageY; }); return { x, y }; }
src/js/event.js
import { onMounted, onUnmounted } from "vue"; export function useEventListener(target, event, callback) { onMounted(() => target.addEventListener(event, callback)); onUnmounted(() => target.removeEventListener(event, callback)); }
跟踪鼠标位置变化的其它写法:
import { ref, onMounted, onUnmounted } from "vue"; // 按照惯例,组合式函数名以“use”开头 // 每一个调用 useMouse() 的组件实例会创建其独有的 x、y 状态拷贝,因此他们不会互相影响。 export function useMouse() { // 被组合式函数封装和管理的状态 const x = ref(0); const y = ref(0); // 组合式函数可以随时更改其状态。 function update(event) { x.value = event.pageX; y.value = event.pageY; } // 一个组合式函数也可以挂靠在所属组件的生命周期上 // 来启动和卸载副作用 onMounted(() => window.addEventListener("mousemove", update)); onUnmounted(() => window.removeEventListener("mousemove", update)); // 通过返回值暴露所管理的状态 return { x, y }; }
标签:逻辑,const,复用,value,js,vue3,import,ref,event From: https://www.cnblogs.com/caroline2016/p/17928367.html