vue3中的hook簡(jiǎn)單封裝
vue3的hook封裝
vue3最新鮮的就是組合式API了，通過(guò)組合式API我們可以把一些復(fù)雜的邏輯或一些常用的邏輯封裝成一個(gè)個(gè)hook來(lái)進(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)行抽離出來(lái)，放到單獨(dú)的js文件中。這樣其實(shí)和我們?cè)趘ue2中學(xué)的mixin比較像。
下面總結(jié)一下如何去書寫hooks
首先應(yīng)該先建立一個(gè)hooks文件夾：其目的是為了存放hook文件。
建立相關(guān)的hook文件：一般使用use開(kāi)頭。
計(jì)數(shù)器的hook
useTitle的hooks
useScrollPostion用來(lái)監(jiān)測(cè)瀏覽器頁(yè)面的滾動(dòng)情況
useMousemove監(jiān)聽(tīng)鼠標(biāo)位置的hook
useLocalStorage可以本地存儲(chǔ)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js聲明式渲染和條件與循環(huán)基礎(chǔ)知識(shí)
這篇文章主要為大家詳細(xì)介紹了vue.js聲明式渲染和條件與循環(huán)的基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題解決方案
在lodash函數(shù)工具庫(kù)中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
計(jì)算屬性是Vue中比較好用的API，開(kāi)發(fā)者可以利用計(jì)算屬將復(fù)雜的計(jì)算進(jìn)行緩存，同時(shí)基于它的響應(yīng)式特性，我們無(wú)需關(guān)注數(shù)據(jù)更新問(wèn)題，但需要注意的是，計(jì)算屬性是惰性求值的，本文將詳細(xì)介紹計(jì)算屬性的實(shí)現(xiàn)原理,需要的朋友可以參考下2023-05-05
vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫說(shuō)明
這篇文章主要介紹了vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要為大家介紹了Vue之組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue使用微信JS-SDK實(shí)現(xiàn)分享功能
這篇文章主要介紹了vue使用微信JS-SDK實(shí)現(xiàn)分享功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)
這篇文章主要介紹了vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3中使用Pinia修改State的五種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11