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