欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中的hook簡單封裝

 更新時(shí)間：2022年04月18日 09:41:54   作者：養(yǎng)只貓  
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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差別并不大因此對比react上手vue3還是比較快的

vue3的hooks總結(jié)

vue3中的hooks其實(shí)是函數(shù)的寫法，就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來，放到單獨(dú)的js文件中。這樣其實(shí)和我們在vue2中學(xué)的mixin比較像。

下面總結(jié)一下如何去書寫hooks

首先應(yīng)該先建立一個(gè)hooks文件夾：其目的是為了存放hook文件。

在這里插入圖片描述

建立相關(guān)的hook文件：一般使用use開頭。 

計(jì)數(shù)器的hook

在這里插入圖片描述

useTitle的hooks

s

useScrollPostion用來監(jiān)測瀏覽器頁面的滾動(dòng)情況

在這里插入圖片描述

useMousemove監(jiān)聽鼠標(biāo)位置的hook

在這里插入圖片描述

useLocalStorage可以本地存儲(chǔ)

在這里插入圖片描述

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論