Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解

更新時間：2022年06月28日 08:39:20 作者：??tangdou369098655????

這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復用性,?讓我們能在不同的組件中都利用hooks函數(shù)

前言

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

VUE2我們是怎么做的呢？

在vue2 中有一個東西：Mixins 可以實現(xiàn)這個功能
mixins就是將這些多個相同的邏輯抽離出來，各個組件只需要引入mixins，就能實現(xiàn)代碼復用
弊端一： 會涉及到覆蓋的問題
組件的data、methods、filters會覆蓋mixins里的同名data、methods、filters
弊端二：隱式傳入，變量來源不明確，不利于閱讀，使代碼變得難以維護

VUE3中我們怎么處理復用代碼邏輯的封裝呢？

Vue3中我們可以：自定義Hook
Vue3 的 hook函數(shù) 相當于 vue2 的 mixin, 但是： hooks 是函數(shù)
Vue3 的 hook函數(shù) 可以幫助我們提高代碼的復用性, 讓我們能在不同的組件中都利用 hooks 函數(shù)

說那么多，不如直接上代碼來看差異

先來一段我們的一把梭代碼，代碼沒有復用，全都放到當前組件

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    VUE3中的HOOKS
  </div>
  <button @click="setNumber">點擊此按鈕，調(diào)用setNumber函數(shù)，數(shù)字會+1：{{myNumber}}</button>
  <button @click="a++">點擊此按鈕，數(shù)字會+1：{{a}}</button>
  <button @click="b--">點擊此按鈕，數(shù)字會-1：{}</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>

執(zhí)行代碼看一下：

上面是原始的寫法，如果這里面好幾個變量我們需要復用怎么辦呢？比如說這幾個變量，函數(shù)，我們需要在其他函數(shù)里也用到，我們要怎么辦呢？？
下面我們就開始采用hook的方法試一把~~
我們創(chuàng)建一個新的文件，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>

到此這篇關(guān)于Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解的文章就介紹到這了,更多相關(guān)Vue3 hooks函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: