三个实例来自   learn_vue: 【教学工程】学习vue2/vue3 (gitee.com)

 

目录

1. 何为Hooks

 2. 使用场景

  3. 常见的 Hooks 函数

  4. 实例

 4.1简易hook 例子

 4.2 自定义scrolltop例子

 4.3 mousemoveHandler例子

 4.4 useCountDown例子

---

1. 何为Hooks

   Hooks 是一种函数，用于封装组件中的逻辑。它可以包含状态、计算属性、生命周期钩子等，并且可以在多个组件之间共享和复用。

 2. 使用场景

   - 逻辑复用：通过 Hooks，可以将一组相关的逻辑封装在一个函数中，提高代码的可复用性。
   - 代码组织：使得组件逻辑更加清晰，避免大型组件选项过于臃肿。
   - 提高可读性和维护性：将相关逻辑分离成多个小函数，使得每个函数的职责更加清晰，便于理       解和维护。

  3. 常见的 Hooks 函数

   -  reactive、ref、computed：用于创建响应式数据。
   - watch、watchEffect：用于监听数据变化。
   - onMounted、onUpdated、onUnmounted：用于处理组件的生命周期。
   -  自定义 Hooks：根据业务逻辑封装的自定义函数，例如下述提到的 useCountDown。

  4. 实例

     4.1简易hook 例子

import { ref } from 'vue';
export default function useCounter() {const count = ref(0);const increment = () => {count.value++;};return {count,increment,};
}

  下述，hooks不是一定要有state

    4.2 自定义scrolltop例子

  注意 一般hooks里包括一些函数钩子，比如mounted，注意 hooks里重要的是state一般被包裹在函数里面，这样不同组件调用 不会共享state

export default function (target=window,dataRef = null){let timer=null//一键回到顶部 时间默认1000毫秒const toTop=(millis=1000)=>{yScrollTo(0,millis)}const yScrollTo=(y,millis=500)=>{if(!timer){const offset = target.scrollTop-yconst frameOffset = Math.abs(offset / (millis / 40));timer=setInterval(()=>{if(offset>0 && target.scrollTop-y >frameOffset){target.scrollTop-=frameOffset}else if(offset<0 && y-target.scrollTop>0)target.scrollTop+=frameOffsetelse{
//这部分让平滑动画，直接赋值target.scrollTop=yclearInterval(timer)timer=null}},40)}}//响应式数据实时滚动距离const scrollTop=ref(0)const scrollHandler=(e)=>{
//同步scrolltopscrollTop.value = target.scrollTop}//组件挂载时候添加scrollhandleronMounted(()=>{target.addEventListener("scroll",scrollHandler)})//组件卸载时候移除scrollhandleronUnmounted(()=>{
target.removeEventListener("scroll", scrollHandler)})onActivated(()=>{if(dataRef){//如果存在要恢复的数据yScrollTo(dataRef.value)console.log("滚动位置已恢复为",dataRef.value)}})onDeactivated(()=>{if(dataRef){console.log("离开时滚动的位置",scrollTop.value)dataRef.value = scrollTop.value}})return scrollTop
}

函数两个参数，第一个参数 target=window，获取目标要滚动到的位置，第二个参数dataRef 如果提供 代表要缓存离开时候 当前滚动到的位置 方便下次回来时候恢复到dataRef的位置

防止同时多次调用滚动动画：
timer为空变送没有正在进行的滚动动画 可以启动一个新的滚动动画

4.3 mousemoveHandler例子

function useMouse(){
const state = reactive({
x:0,
y:0
})
const mousemoveHandler=(e)=>{
//更新实时数据
state.x = e.pageX
state.y  = e.pageY
}
//组件挂载时候建立mousemove事件监听器
onMounted(()=>{
window.addEventListener("mousemove",mousemoveHandler)
})
onUnmounted(()=>{
window.removeEventListener("mousemove",mousemoveHandler)
})
return toRefs(state)
//将state里的属性拆开每个都是响应式数据}
export default mousemoveHandler

4.4 useCountDown例子

function getTimeDiffer(startDate, endDate){
let timeDiff = endDate-startDate
// 计算过去了多少天
var daysDiffer = parseInt(timeDiffer / (24 * 3600 * 1000));
// console.log(daysDiffer);// 计算不足一天的时分秒 odd奇数，零头
var oddMillis = timeDiffer % (24 * 3600 * 1000);
var hoursDiffer = parseInt(oddMillis / (3600 * 1000));
// console.log(hoursDiffer);// 不足一小时的零头毫秒
oddMillis = oddMillis % (3600 * 1000);
var minutesDiffer = parseInt(oddMillis / (60 * 1000));
// console.log(minutesDiffer);// 计算秒
var secondsDiffer = Math.round((oddMillis % (60 * 1000)) / 1000);
// console.log(secondsDiffer);
return {
daysDiffer,
hoursDiffer,
minutesDiffer,
secondsDiffer,
}}const useCountDown = (targetDate)=>{
//targetDate: new Date(2023, 0, 1),
const state = reactive({
days:0,
hours:0,
minutes:0,
seconds:0
})let timer = null
onMounted(()=>{
timer = setInterval(()=>{
const {daysDiffer,hoursDiffer,minutesDiffer,secondsDiffer}=getTimeDiffer(new Date(),targetDate)
state.days = daysDiffer;
state.hours = hoursDiffer;
state.minutes = minutesDiffer;
state.seconds = secondsDiffer;},1000)
})
/* 组件卸载时移除定时器 */
onUnmounted(() => {
if (timer) {
clearInterval(timer);
console.log(“timer已移除”);
}
});// {days,hours,minutes,seconds}
return toRefs(state);}
export default useCountDown