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-07vue3使用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-12vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能
這篇文章主要為大家詳細介紹了vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04