我居然不知道Vue3可以使用hooks函式實現程式碼複用?

語言: CN / TW / HK

本文已參與「新人創作禮」活動,一起開啟掘金創作之路。

每天都要開心(^▽^)哇:

image.png

專案開發過程中,我們會遇到一些情況,就是多個元件都可以重複使用的一部分程式碼邏輯,功能函式,我們想要複用,這可怎麼辦呢?

VUE2我們是怎麼做的呢?

  • 在vue2 中有一個東西:Mixins 可以實現這個功能
  • mixins就是將這些多個相同的邏輯抽離出來,各個元件只需要引入mixins,就能實現程式碼複用
  • 弊端一: 會涉及到覆蓋的問題
  • 元件的data、methods、filters會覆蓋mixins裡的同名data、methods、filters
  • 弊端二:隱式傳入,變數來源不明確,不利於閱讀,使程式碼變得難以維護

VUE3中我們怎麼處理複用程式碼邏輯的封裝呢?

  • Vue3中我們可以: 自定義Hook
  • Vue3 的 hook函式 相當於 vue2 的 mixin, 但是: hooks 是函式
  • Vue3 的 hook函式 可以幫助我們提高程式碼的複用性, 讓我們能在不同的元件中都利用 hooks 函式

說那麼多,不如直接上程式碼來看差異

  • 先來一段我們的一把梭程式碼,程式碼沒有複用,全都放到當前元件 ```

    ```

    • 執行程式碼看一下下哇~~
    • 上面是原始的寫法,如果這裡面好幾個變數我們需要複用怎麼辦呢?比如說這幾個變數,函式,我們需要在其他函式裡也用到,我們要怎麼辦呢??
    • 下面我們就開始採用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 } }

    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/484a1f5403174d2196909ca7dd027181~tplv-k3u1fbpfcp-zoom-1.image) - 改寫一下我們的模板程式碼裡的script

    ``` - 哇哦,(^▽^),是不是有點開心,程式碼看起來是不是感覺,神清氣爽了??? - 然後測試一下我們的程式碼吧~~~ - 不放圖了哦,依然正常執行的哇~~ - 今天就寫到這裡啦~小夥伴們,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我們明天再見啦~~ - 大家要天天(^▽^)哦

    歡迎大家指出文章需要改正之處~
    學無止境,合作共贏

    在這裡插入圖片描述

    歡迎路過的小哥哥小姐姐們提出更好的意見哇~~