vue3组合式函数和普通公共方法

最新推荐文章于 2026-08-22 22:10:06 发布

原创最新推荐文章于 2026-08-22 22:10:06 发布 · 392 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

1.vue组合式函数

2.普通公共方法

3.两者区别对比

1.vue组合式函数

管理状态：它内部使用 ref 或 reactive 创建并管理响应式状态（x 和 y）。这个状态会随着时间（鼠标点击）而改变。
管理副作用和生命周期：它使用 onMounted 和 onUnmounted 这样的钩子函数来管理副作用。在代码里，副作用就是“监听并移除 click 事件”。这确保了当使用这个函数的组件被销毁时，事件监听器也会被正确移除，避免内存泄漏。
与 Vue 紧密集成：它必须在 Vue 的 setup 函数或 <script setup> 中执行，才能利用 Vue 的响应式系统和生命周期。
封装和复用“逻辑”：它封装的不是数据，而是一整套“如何获取并维护鼠标位置”的逻辑流程。

举例1:

//新建 src/hooks/useMousePosition.ts

import { onMounted, onUnmounted, onUpdated, ref } from 'vue';
function useMousePosition() {
  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);
  })
  return{
    x,
    y
  }
}
export default useMousePosition;

在 .vue文件中使用

import useMousePosition from '@/hooks/useMousePosition';

const {x,y}=useMousePosition()//拿到x、y坐标

举例2：

//新建 src/hooks/useURLLoader.ts

import {reactive} from 'vue'
import axios from 'axios'
interface IURLLoader<T>{
    result:null|T, //因为下面result默认值为null , 所以如果只写个T的话，就会报类型的错
    loading:boolean,
    error:null
}
const useURLLoader=<T=any>(url:string)=>{//使用泛型 将T传递到result上，默认给个any类型
    const data:IURLLoader<T>=reactive({
      result:null,
      loading:true,
      error:null
    })
    axios.get(url).then(res=>{
      data.result=res.data
    }).catch((e)=>{
      data.error=e
    }).finally(()=>{
      data.loading=false
    })
    return data
}

export default useURLLoader

在 .vue文件中使用

import useURLLoader from '@/hooks/useURLLoader';

interface IDogResult{
    message:string,
    status:string,
}
//传递过去的IDogResult类型就是 上面result的类型
const imageData=useURLLoader<IDogResult>('https://dog.ceo/api/breeds/image/random')

2.普通公共方法

无状态：它不自己维护任何内部数据。你给它一些输入，它给你一个确定的输出。
无生命周期：它不知道也不关心 Vue 组件的存在，无法在组件挂载时自动执行某些操作，或在组件销毁时自动清理。
与框架无关：它就是一段普通的 JavaScript 逻辑，可以在任何地方使用。

举例

// utils/math.js - 这是一个典型的公共方法
export function calculateDistance(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

3.两者区别对比

标签

#javascript #前端 #vue3 #hooks