vue3中的hook簡單封裝
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,
? };
}簡單的封裝了一個(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è)瀏覽器頁面的滾動(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-07
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對(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-03
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
這篇文章主要介紹了vue組件之間通信,結(jié)合實(shí)例形式分析了vue父子組件、兄弟組件之間通信的原理、實(shí)現(xiàn)方法,并給出了一個(gè)類似點(diǎn)贊功能的總結(jié)實(shí)例,需要的朋友可以參考下2018-12-12
vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單拖拽元素功能
這篇文章主要為大家詳細(xì)介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue3.0如何在全局掛載對(duì)象和方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼
這篇文章主要介紹了Vue.js實(shí)現(xiàn)輸入框綁定的實(shí)例代碼,需要的朋友可以參考下2017-08-08
Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了bing Map 在vue項(xiàng)目中的使用,需要的朋友可以參考下2018-04-04