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

vue3中的hook簡單封裝

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

vue3的hook封裝

vue3最新鮮的就是組合式API了，通過組合式API我們可以把一些復雜的邏輯或一些常用的邏輯封裝成一個個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進行學習，vue3的hook和react的hook差別并不大因此對比react上手vue3還是比較快的

vue3的hooks總結(jié)

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

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

首先應該先建立一個hooks文件夾：其目的是為了存放hook文件。

在這里插入圖片描述

建立相關的hook文件：一般使用use開頭。 

計數(shù)器的hook

在這里插入圖片描述

useTitle的hooks

s

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

在這里插入圖片描述

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

在這里插入圖片描述

useLocalStorage可以本地存儲

在這里插入圖片描述

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

相關文章

最新評論