vue3中的hook簡單封裝
更新時間：2022年04月18日 09:41:54 作者：養(yǎng)只貓
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3的hook封裝
vue3最新鮮的就是組合式API了，通過組合式API我們可以把一些復(fù)雜的邏輯或一些常用的邏輯封裝成一個個hook來進行調(diào)用，這樣的方式也更易于維護。
使用
import useTest from "../../hooks/useTest";
export default defineComponent({
? name: "vue3Test",
? setup: () => {
? ? let refTest = ref(111); // 單個值用ref
? ? const { testHook } = useTest({ value: refTest });
? ? return { refTest, testHook };
? }
});useTest
import { Ref, ref, reactive, watch } from "vue";
export default function ({ value }: { value: Ref<number> }) {
? let testHook = ref(1000);
? let testReactiveHook = reactive({
? ? name: "234567i",
? });
? watch(value, () => {
? ? testHook.value = testHook.value + value.value;
? ? testReactiveHook.name = "343453453453434";
? });
? return {
? ? testHook,
? ? testReactiveHook,
? };
}簡單的封裝了一個hook進行學(xué)習(xí)，vue3的hook和react的hook差別并不大因此對比react上手vue3還是比較快的
vue3的hooks總結(jié)
vue3中的hooks其實是函數(shù)的寫法，就是將文件的一些單獨功能的js代碼進行抽離出來，放到單獨的js文件中。這樣其實和我們在vue2中學(xué)的mixin比較像。
下面總結(jié)一下如何去書寫hooks
首先應(yīng)該先建立一個hooks文件夾：其目的是為了存放hook文件。
建立相關(guān)的hook文件：一般使用use開頭。
計數(shù)器的hook
useTitle的hooks
useScrollPostion用來監(jiān)測瀏覽器頁面的滾動情況
useMousemove監(jiān)聽鼠標位置的hook
useLocalStorage可以本地存儲
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js內(nèi)部自定義指令與全局自定義指令的實現(xiàn)詳解（利用directive）
這篇文章主要給大家介紹了關(guān)于vue.js內(nèi)部自定義指令與全局自定義指令的實現(xiàn)方法，vue.js中實現(xiàn)自定義指令的主要是利用directive，directive這個單詞是我們寫自定義指令的關(guān)鍵字，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12
下面小編就為大家分享一篇完美解決iview 的select下拉框選項錯位的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了vue組件之間通信,結(jié)合實例形式分析了vue父子組件、兄弟組件之間通信的原理、實現(xiàn)方法,并給出了一個類似點贊功能的總結(jié)實例,需要的朋友可以參考下2018-12-12
vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能
這篇文章主要為大家詳細介紹了vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue3.0如何在全局掛載對象和方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue.js實現(xiàn)輸入框綁定的實例代碼,需要的朋友可以參考下2017-08-08
Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下2018-04-04