Vue3使用hooks函數實現代碼復用詳解
前言
項目開發過程中,我們會遇到一些情況,就是多個組件都可以重復使用的一部分代碼邏輯,功能函數,我們想要復用,這可怎麼辦呢?
VUE2我們是怎麼做的呢?
- 在vue2 中有一個東西:Mixins 可以實現這個功能
- mixins就是將這些多個相同的邏輯抽離出來,各個組件隻需要引入mixins,就能實現代碼復用
- 弊端一: 會涉及到覆蓋的問題
- 組件的data、methods、filters會覆蓋mixins裡的同名data、methods、filters
- 弊端二:隱式傳入,變量來源不明確,不利於閱讀,使代碼變得難以維護
VUE3中我們怎麼處理復用代碼邏輯的封裝呢?
- Vue3中我們可以:自定義Hook
- Vue3 的 hook函數 相當於 vue2 的 mixin, 但是: hooks 是函數
- Vue3 的 hook函數 可以幫助我們提高代碼的復用性, 讓我們能在不同的組件中都利用 hooks 函數
說那麼多,不如直接上代碼來看差異
先來一段我們的一把梭代碼,代碼沒有復用,全都放到當前組件
<template> <img alt="Vue logo" src="./assets/logo.png" /> <div> VUE3中的HOOKS </div> <button @click="setNumber">點擊此按鈕,調用setNumber函數,數字會+1:{{myNumber}}</button> <button @click="a++">點擊此按鈕,數字會+1:{{a}}</button> <button @click="b--">點擊此按鈕,數字會-1:{{b}}</button> </template> <script> import { reactive,ref,computed,watch,watchEffect } from "vue"; export default { setup(){ const myNumber = ref(0) const a = ref(0) const b = ref(0) const setNumber = ()=>{ myNumber.value = myNumber.value+1; } watch([a,b],([newA,newB],[oldA,oldB])=>{ console.log('newA,oldA:') console.log(newA,oldA) console.log('newA,oldB:') console.log(newA,oldB) }) return{ myNumber, a, b, setNumber } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } button{ display: block; margin: 0 auto; } </style>
執行代碼看一下:
- 上面是原始的寫法,如果這裡面好幾個變量我們需要復用怎麼辦呢?比如說這幾個變量,函數,我們需要在其他函數裡也用到,我們要怎麼辦呢??
- 下面我們就開始采用hook的方法試一把~~
- 我們創建一個新的文件,src\common-hooks\numberChange.js
- 把上面的代碼,剪切到src\common-hooks\numberChange.js,然後用這個套起來:export const useNumber =() =>{}
import { ref,watch } from "vue"; export const useNumber =() =>{ const myNumber = ref(0) const a = ref(0) const b = ref(0) const setNumber = ()=>{ myNumber.value = myNumber.value+1; } watch([a,b],([newA,newB],[oldA,oldB])=>{ console.log('newA,oldA:') console.log(newA,oldA) console.log('newA,oldB:') console.log(newA,oldB) }) return{ myNumber, a, b, setNumber } }
改寫一下我們的模板代碼裡的script:
<script> import { useNumber } from "./common-hooks/numberChange"; export default { setup() { const { myNumber, a, b, setNumber } = useNumber(); return { myNumber, a, b, setNumber }; }, }; </script>
到此這篇關於Vue3使用hooks函數實現代碼復用詳解的文章就介紹到這瞭,更多相關Vue3 hooks函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!