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!

推薦閱讀: