十個有用的自定義Vue鉤子函數(shù)總結(jié)

更新時間：2022年04月08日 09:57:24 作者：前端小智

這篇文章主要為大家介紹了十個Vue.js中有用的自定義鉤子，讓我們的代碼更加好看。文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下

Vue 是我使用的第一個 JS 框架?？梢哉f，Vue 是我進入JavaScript世界的第一道門之一。目前，Vue 仍然是一個很棒的框架。隨著 composition API 的出現(xiàn)，Vue 只會有更大的發(fā)展。在這篇文章中，我將介紹 10 個有用的自定義鉤子，讓我們的代碼更加好看。

useWindowResize

這是一個基本的鉤子，因為它被用在很多項目中.

import { ref, onMounted, onUnmounted } from 'vue';
export function useWindowResize() {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);
  const handleResize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted(() => {
    window.addEventListener('resize', handleResize)
  });
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
  return {
    width,
    height
  }
}

使用就更簡單了，只需要調(diào)用這個鉤子就可以獲得 window 的寬度和高度。

setup() {
    const { width, height } = useWindowResize();
}

useStorage

你想通過在 session storage 或 local storage 中存儲數(shù)據(jù)的值來持久化數(shù)據(jù)，并將該值綁定到視圖?有了一個簡單的鉤子--useStorage，這將變得非常容易。我們只需要創(chuàng)建一個鉤子來返回從存儲空間得到的數(shù)據(jù)，以及一個函數(shù)來在我們想要改變數(shù)據(jù)時將其存儲在存儲空間。下面是我的鉤子。

import { ref } from 'vue';
const getItem = (key, storage) => {
  let value = storage.getItem(key);
  if (!value) {
    return null;
  }
  try {
    return JSON.parse(value)
  } catch (error) {
    return value;
  }
}
export const useStorage = (key, type = 'session') => {
  let storage = null;
  switch (type) {
    case 'session':
      storage = sessionStorage;
      break;
    case 'local':
      storage = localStorage;
      break;
    default:
      return null;
  }
  const value = ref(getItem(key, storage));
  const setItem = (storage) => {
    return (newValue) => {
      value.value = newValue;
      storage.setItem(key, JSON.stringify(newValue));
    }
  }
  return [
    value,
    setItem(storage)
  ]
}

在我的代碼中，我使用 JSON.parse ** 和 JSON.stringify** 來格式化數(shù)據(jù)。如果你不想格式化它，你可以刪除它。下面是一個如何使用這個鉤子的例子。

const [token, setToken] = useStorage('token');
setToken('new token');

useNetworkStatus

這是一個有用的鉤子，支持檢查網(wǎng)絡連接的狀態(tài)。為了實現(xiàn)這個鉤子，我們需要為事件 "在線"和 "離線"添加事件監(jiān)聽器。在事件中，我們只是調(diào)用一個回調(diào)函數(shù)，參數(shù)為網(wǎng)絡狀態(tài)。下面是我的代碼。

import { onMounted, onUnmounted } from 'vue';
export const useNetworkStatus = (callback = () => { }) => {
  const updateOnlineStatus = () => {
    const status = navigator.onLine ? 'online' : 'offline';
    callback(status);
  }
  onMounted(() => {
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
  });
  onUnmounted(() => {
    window.removeEventListener('online', updateOnlineStatus);
    window.removeEventListener('offline', updateOnlineStatus);
  })
}

調(diào)用方式：

useNetworkStatus((status) => { 
    console.log(`Your network status is ${status}`);
}

useCopyToClipboard

剪切板是一個比較常見的功能，我們也可以將它封裝成 hook，代碼如下所示：

function copyToClipboard(text) {
  let input = document.createElement('input');
  input.setAttribute('value', text);
  document.body.appendChild(input);
  input.select();
  let result = document.execCommand('copy');
  document.body.removeChild(input);
  return result;
}
export const useCopyToClipboard = () => {
  return (text) => {
    if (typeof text === "string" || typeof text == "number") {
      return copyToClipboard(text);
    }
    return false;
  }
}

使用如下：

const copyToClipboard = useCopyToClipboard();
copyToClipboard('just copy');

useTheme

只是一個簡短的鉤子來改變網(wǎng)站的主題。它可以幫助我們輕松地切換網(wǎng)站的主題，只需用主題名稱調(diào)用這個鉤子。下面是一個我用來定義主題變量的CSS代碼例子。

html[theme="dark"] {
   --color: #FFF;
   --background: #333;
}
html[theme="default"], html {
   --color: #333;
   --background: #FFF;
}

要改變主題，只需要做一個自定義的鉤子，它返回一個函數(shù)來通過主題名稱改變主題。代碼如下：

export const useTheme = (key = '') => {
  return (theme) => {
    document.documentElement.setAttribute(key, theme);
  }
}

使用如下：

const changeTheme = useTheme();
changeTheme('dark');

usePageVisibility

有時，當客戶不專注于我們的網(wǎng)站時，我們需要做一些事情。要做到這一點，我們需要一些東西，讓我們知道用戶是否在關注。這是一個自定義的鉤子。我把它叫做 PageVisibility，代碼如下：

import { onMounted, onUnmounted } from 'vue';
export const usePageVisibility = (callback = () => { }) => {
  let hidden, visibilityChange;
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }
  const handleVisibilityChange = () => {
    callback(document[hidden]);
  }
  onMounted(() => {
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
  });
  onUnmounted(() => {
    document.removeEventListener(visibilityChange, handleVisibilityChange);
  });
}

用法如下：

usePageVisibility((hidden) => {
   console.log(`User is${hidden ? ' not' : ''} focus your site`);
});

useViewport

有時我們會用寬度來檢測當前的用戶設備，這樣我們就可以根據(jù)設備來處理對應的內(nèi)容。這種場景，我們也可以封裝成一個 hook，代碼如下：

import { ref, onMounted, onUnmounted } from 'vue';
export const MOBILE = 'MOBILE'
export const TABLET = 'TABLET'
export const DESKTOP = 'DESKTOP'
export const useViewport = (config = {}) => {
  const { mobile = null, tablet = null } = config;
  let mobileWidth = mobile ? mobile : 768;
  let tabletWidth = tablet ? tablet : 922;
  let device = ref(getDevice(window.innerWidth));
  function getDevice(width) {
    if (width < mobileWidth) {
      return MOBILE;
    } else if (width < tabletWidth) {
      return TABLET;
    }
    return DESKTOP;
  }
  const handleResize = () => {
    device.value = getDevice(window.innerWidth);
  }
  onMounted(() => {
    window.addEventListener('resize', handleResize);
  });
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
  return {
    device
  }
}

使用如下：

const { device } = useViewport({ mobile: 700, table: 900 });

useOnClickOutside

當 model 框彈出時，我們希望能點擊其它區(qū)域關閉它，這個可以使用 clickOutSide，這種場景我們也可以封裝成鉤子，代碼如下：

import { onMounted, onUnmounted } from 'vue';
export const useOnClickOutside = (ref = null, callback = () => {}) => {
  function handleClickOutside(event) {
    if (ref.value && !ref.value.contains(event.target)) {
      callback()
    }
  }
  onMounted(() => {
    document.addEventListener('mousedown', handleClickOutside);
  })
  onUnmounted(() => {
    document.removeEventListener('mousedown', handleClickOutside);
  });
}

用法如下：

<template>
    <div ref="container">View</div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const container = ref(null);
        useOnClickOutside(container, () => {
            console.log('Clicked outside'); 
        })
    }
}
</script>

useScrollToBottom

除了分頁列表，加載更多(或懶惰加載)是一種友好的加載數(shù)據(jù)的方式。特別是對于移動設備，幾乎所有運行在移動設備上的應用程序都在其用戶界面中應用了load more。要做到這一點，我們需要檢測用戶滾動到列表底部，并為該事件觸發(fā)一個回調(diào)。

useScrollToBottom 是一個有用的鉤子，支持你這樣做。代碼如下：

import { onMounted, onUnmounted } from 'vue';
export const useScrollToBottom = (callback = () => { }) => {
  const handleScrolling = () => {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      callback();
    }
  }
  onMounted(() => {
    window.addEventListener('scroll', handleScrolling);
  });
  onUnmounted(() => {
    window.removeEventListener('scroll', handleScrolling);
  });
}

用法如下：

useScrollToBottom(() => { console.log('Scrolled to bottom') })

useTimer

useTimer 的代碼比其他鉤子要長一些。useTimer 支持運行一個帶有一些選項的定時器，如開始、暫停/恢復、停止。要做到這一點，我們需要使用 setInterval 方法。在這里，我們需要檢查定時器的暫停狀態(tài)。如果定時器沒有暫停，我們只需要調(diào)用一個回調(diào)函數(shù)，該函數(shù)由用戶作為參數(shù)傳遞。為了支持用戶了解該定時器當前的暫停狀態(tài)，除了action useTimer之外，還要給他們一個變量 isPaused，其值為該定時器的暫停狀態(tài)。代碼如下：

import { ref, onUnmounted } from 'vue';
export const useTimer = (callback = () => { }, step = 1000) => {
  let timerVariableId = null;
  let times = 0;
  const isPaused = ref(false);
  const stop = () => {
    if (timerVariableId) {
      clearInterval(timerVariableId);
      timerVariableId = null;
      resume();
    }
  } 
  const start = () => {
    stop();
    if (!timerVariableId) {
      times = 0;
      timerVariableId = setInterval(() => {
        if (!isPaused.value) {
          times++;
          callback(times, step * times);
        }
      }, step)
    }
  }
  const pause = () => {
    isPaused.value = true;
  }
  const resume = () => {
    isPaused.value = false;
  }
  onUnmounted(() => {
    if (timerVariableId) {
      clearInterval(timerVariableId);
    }
  })
  return {
    start,
    stop,
    pause,
    resume,
    isPaused
  }
}

用法如下：

function handleTimer(round) {      
    roundNumber.value = round;    
}
const { 
    start,
    stop,
    pause,
    resume,
    isPaused
} = useTimer(handleTimer);

以上就是十個有用的自定義Vue鉤子函數(shù)總結(jié)的詳細內(nèi)容，更多關于Vue鉤子函數(shù)的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue2+electron項目搭建過程
文章介紹了如何使用Vue CLI 2搭建Vue項目,并添加Electron插件vue-cli-plugin-electron-builder來創(chuàng)建一個Vue+Electron項目,文章還提供了啟動和打包項目的方法,并提示了下載國內(nèi)網(wǎng)較慢的文件時可以先注釋掉代碼進行調(diào)試,感興趣的朋友一起看看吧
2025-01-01
elementui[el-table]toggleRowSelection默認多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認多選事件無法選中問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue.js中Line第三方登錄api的實現(xiàn)代碼
這篇文章主要介紹了Vue.js中Line第三方登錄api實現(xiàn)代碼，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-06-06
vue中bus的使用及踩坑解決
這篇文章主要為大家詳細介紹了vue中bus的相關使用以及涉及到的問題與解決,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下
2023-08-08
Vue中父組件向子組件傳遞數(shù)據(jù)的幾種方法
最近在學習vue的源碼，總結(jié)了幾種vue中父子組件傳遞數(shù)據(jù)的方法。具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
Vue對象的深層劫持詳細講解
這篇文章主要介紹了vue2.x對象深層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-01-01
vue實現(xiàn)多條件篩選超簡潔代碼
這篇文章主要給大家介紹了關于vue實現(xiàn)多條件篩選的相關資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
2023-09-09
在Vue 中使用Typescript的示例代碼
這篇文章主要介紹了在Vue 中使用Typescript的示例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
解決vue-router 切換tab標簽關閉時緩存問題
這篇文章主要介紹了解決vue-router 切換tab標簽關閉時緩存問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07