模块化开发 第一部分 鼠标追踪器
// 在单组件内添加对应逻辑 const x = ref(0) const y = ref(0) const updateMouse = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } onMounted(() => { document.addEventListener('click', updateMouse) }) onUnmounted(() => { document.removeEventListener('click', updateMouse) }) // 将组件内逻辑抽象成可复用的函数 function useMouseTracker() { // const positions = reactive<MousePostion>({ // x: 0, // y: 0 // }) const x = ref(0) const y = ref(0) const updatePosition = (event: MouseEvent) => { x.value = event.clientX y.value = event.clientY } onMounted(() => { document.addEventListener('click', updatePosition) }) onUnmounted(() => { document.removeEventListener('click', updatePosition) }) return { x, y } } export default useMouseTracker 复制代码
vue3 这种实现方式的优点
- 第一：它可以清楚的知道 xy 这两个值的来源，这两个参数是干什么的，他们来自 useMouseTracker 的返回，那么它们就是用来追踪鼠标位置的值。
- 第二：我们可以xy 可以设置任何别名，这样就避免了命名冲突的风险。
- 第三：这段逻辑可以脱离组件存在，因为它本来就和组件的实现没有任何关系，我们不需要添加任何组件实现相应的功能。只有逻辑代码在里面，不需要模版。
模块化难度上升 - useURLLoader
// 安装 axios 注意它是自带 type 文件的，所以我们不需要给它另外安装 typescript 的定义文件
npm install axios --save
import { ref } from 'vue' import axios from 'axios' // 添加一个参数作为要使用的 地址 const useURLLoader = (url: string) => { // 声明几个ref，代表不同的状态和结果 const result = ref(null) const loading = ref(true) const loaded = ref(false) const error = ref(null) // 发送异步请求，获得data // 由于 axios 都有定义，所以rawData 可以轻松知道其类型 axios.get(url).then((rawData) => { loading.value = false loaded.value = true result.value = rawData.data }).catch((e) => { error.value = e }) // 将这些ref 一一返回 return { result, loading, error, loaded } } export default useURLLoader 复制代码
// 使用 urlLoader 展示狗狗图片 const { result, loading, loaded } = useURLLoader('https://dog.ceo/api/breeds/image/random') ... <h1 v-if="loading">Loading!...</h1> <img v-if="loaded" :src="result.message" >
