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