Vue3使用hooks函數實現代碼復用詳解

Posted on by

前言

項目開發過程中，我們會遇到一些情況，就是多個組件都可以重復使用的一部分代碼邏輯，功能函數，我們想要復用，這可怎麼辦呢？

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！

推薦閱讀：