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>到此這篇關于Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解的文章就介紹到這了,更多相關Vue3 hooks函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue $router和$route的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
vue頁面設置滾動失敗的完美解決方案(scrollTop一直為0)
這篇文章主要介紹了vue頁面設置滾動失敗的解決方案(scrollTop一直為0),本文通過場景分析實例代碼相結(jié)合給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue elementUI表格控制顯示隱藏對應列的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue雙向綁定是指數(shù)據(jù)模型和視圖之間的數(shù)據(jù)同步，通過Object.defineProperty()方法實現(xiàn)數(shù)據(jù)劫持，利用觀察者模式實現(xiàn)數(shù)據(jù)更新和視圖更新的自動同步，實現(xiàn)方式包括指令、計算屬性、v-model等，優(yōu)化方法包括使用虛擬DOM、合理使用computed和watch等2023-04-04
vue組件通信的方式，這是在面試中一個非常高頻的問題。其實Vue組件的通信方式除了props和?$emit還有很多，本文將對vue組件通信方式進行一下總結(jié)，感興趣的可以學習一下2021-12-12
vue代理如何配置重寫方法(pathRewrite與rewrite)
這篇文章主要介紹了vue代理如何配置重寫方法(pathRewrite與rewrite),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在使用token進行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗肯定是不好的,下面這篇文章主要給大家介紹了關于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下2023-02-02
treeSelect樹組件設置父節(jié)點禁用的方法實例
這篇文章主要給大家介紹了關于treeSelect樹組件設置父節(jié)點禁用的相關資料,文中通過圖文以及示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了調(diào)用createApp?時Vue工作過程原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
在Vue應用中，有時我們需要實現(xiàn)文件預覽和打印的功能，比如，我們可能需要預覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實現(xiàn)文件預覽和打印的功能，并提供相應的代碼示例2023-06-06