1. 前言
在這篇文章 vue3事件-鉤子-請求 基礎(chǔ)上進(jìn)行 進(jìn)一步修改
不在過多解釋hook
2. hook
1.借鑒
react寫法
2.拆分邏輯,方便使用,發(fā)布NPM也方便
2.1 拆分在這篇文章 vue3事件-鉤子-請求 的邏輯
import { reactive,computed} from 'vue'
function useCounter(params) {
console.log("params")
// 響應(yīng)式對象
const state = reactive({
count: 0,
msg:"提示"
})
//*****************************自定義函數(shù) */
// 點(diǎn)擊事件
const add = (event)=>{
state.count ++
}
// 計(jì)算屬性
const doubleCounter = computed(()=>state.count *2)
// 暴露出去
return{state,add,doubleCounter}
}
export default useCounter
2.2分析
1.把
state相關(guān)邏輯單獨(dú)拆分出來
3. 使用hook
引入
import useCounter from "./useCounter.js"
核心代碼
setup() {
// react API 設(shè)計(jì)的很像,但是內(nèi)部實(shí)現(xiàn)不一樣
const {
state,
add,
doubleCounter
} = useCounter()
// 單值響應(yīng)式 可以直接用
const anthorCounter = ref(1)
const singState = reactive({
name: ""
})
// ******************* 生命周期 鉤子
onMounted(() => {
console.log("mounted 掛載的時(shí)候執(zhí)行")
myFetch.fetchGet("https://xx.yzs.org/v1/cities", {
type: "1"
}).then(res => {
singState.name = res.name
console.log(res);
}).catch(err => {
console.log(err);
})
})
return {
anthorCounter,
...toRefs(state),
...toRefs(singState),
add
}
}
同一個(gè)邏輯點(diǎn) 操作在一起,不用來回跳轉(zhuǎn)
4. 封裝一個(gè) 當(dāng)前事件的 hook
useTime.js
4.1 簡要代碼
import { reactive,toRefs ,onMounted} from 'vue'
// 事件檢測
function useTime() {
const state = reactive({
time:new Date()
})
onMounted(() => {
console.log("useTime onMounted")
setInterval(()=>{
state.time = new Date()
},1000)
})
return toRefs(state)
}
export default useTime
4.2 分析
1.state就一個(gè)時(shí)間
2.時(shí)間需要在每次加載的時(shí)候獲取,所以在onMounted鉤子
3.響應(yīng)式展開
4.3 使用
1.引入
import useTime from "@/xx/useTime.js"
2.數(shù)據(jù)
export default {
setup () {
// 使用鼠標(biāo)的邏輯
// 檢測邏輯
const {time} = useTime()
// 暴露數(shù)據(jù)
return{time}
}
}
4.4 模板
<p>time:{{time}}</p>
5. 獲取鼠標(biāo)位置的 Hook
useMouse.js
5.1代碼
import { reactive, toRefs ,onMounted,onUnmounted} from 'vue'
// 鼠標(biāo)位置偵聽
function useMouse() {
// 數(shù)據(jù)響應(yīng)
const state = reactive({
x:10,
y:10
})
// 事件更新
const update = e=>{
console.log("update",e)
state.x = e.pageX
state.y = e.pageY
}
// 鉤子
// 已經(jīng)加載
onMounted(()=>{
console.log("useMouse onMounted")
window.addEventListener("mousemove",update)
})
//卸載
onUnmounted(() => {
console.log("--------- onUnmounted")
window.removeEventListener("mousemove",update)
})
//轉(zhuǎn)換所有key為響應(yīng)式數(shù)據(jù)
return {
...toRefs(state),
update
}
}
export default useMouse
5.2分析
1.鼠標(biāo)位置需要x,y表示 ,直接使用一個(gè)對象具備x,y屬性
2.加載的時(shí)候監(jiān)聽
3.卸載的時(shí)候取消監(jiān)聽邏輯閉環(huán)
4.監(jiān)聽函數(shù)
5.3 使用
export default {
setup () {
// 使用鼠標(biāo)的邏輯
const {x,y,update} = useMouse()
// 檢測邏輯
const {time} = useTime()
// 暴露數(shù)據(jù)
return{x,y,time,update}
}
}
5.4 模板
<div>x:{{x}} y:{{y}}</div>
6. hook
1.數(shù)據(jù)來源清晰 對比之前的寫法 Mixin 不會(huì)出現(xiàn)磁盤碎片
2.不會(huì)出現(xiàn)命名沖突
- 更好的維護(hù)性
- 消除 this ,因?yàn)閠his 對 TS不友好
