簡(jiǎn)述
組件(Component) 是vue框架中最核心的概念情妖,所有邏輯都圍繞組件展開睬关,得組件者,得天下毡证。
這里我主要想說一下幾種不同的組件寫法电爹,并闡明不同的寫法的優(yōu)缺點(diǎn)以及適用場(chǎng)景。
場(chǎng)景
這里通過一個(gè)簡(jiǎn)單的場(chǎng)景:統(tǒng)計(jì)Button點(diǎn)擊次數(shù)情竹,來展示不同的寫法藐不。
經(jīng)典的三段式寫法
<template>
<div>
You clicked: {{ count }} times
<button @click="handleClick">
Click me
</button>
</div>
</template>
<script lang="javascript">
export default {
data() {
return {
count: 0
}
},
methods: {
handleClick() {
this.count++
}
}
}
</script>
這里匀哄,用template
申明了表現(xiàn)層,data()
返回組件所需的數(shù)據(jù)雏蛮,methods
申明了處理邏輯涎嚼。
在簡(jiǎn)單的場(chǎng)景下,把表現(xiàn)層挑秉,數(shù)據(jù)法梯,處理邏輯申明在同一個(gè)文件問題并不大,可讀性也能接受犀概。
但假設(shè)立哑,在上面的基礎(chǔ)上還需要增加新的需求:1秒內(nèi)多次點(diǎn)擊的情況下,只統(tǒng)計(jì)1次姻灶。
這種情況下铛绰,我們就需要把組件改成如下:
<template>
<div>
You clicked: {{ count }} times
<button @click="handleClick">
Click me
</button>
</div>
</template>
<script lang="javascript">
export default {
data() {
return {
count: 0,
// 增加一個(gè)標(biāo)志位,控制是否進(jìn)行點(diǎn)擊統(tǒng)計(jì)
shouldCount: true
}
},
methods: {
handleClick() {
// 如果標(biāo)志為 false产喉,則說明還在上一次點(diǎn)擊的1秒以內(nèi)捂掰,則不統(tǒng)計(jì)
if (!this.shouldCount) return
// 否則進(jìn)行統(tǒng)計(jì), 并立即把標(biāo)志位設(shè)定為false
this.count++
this.shouldCount = false
// 1秒之后,重新激活標(biāo)志位
setTimeout(() => {
this.shouldCount = true
}, 1000)
}
}
}
</script>
改造之后曾沈,整個(gè)組件的邏輯部分開始膨脹这嚣。之前那種一目了然的感覺沒有了。
數(shù)據(jù)部分data()
多返回了一個(gè)shouldCount
標(biāo)志位塞俱,handleClick
也結(jié)合標(biāo)志位進(jìn)行了相應(yīng)控制姐帚。
這里把數(shù)據(jù)處理,轉(zhuǎn)換障涯,以及展示都混在一起了罐旗,造成了理解成本增加。
組合式寫法(composition)
借助@vue/composition-api
像樊,使用組合式寫法尤莺,組件可以簡(jiǎn)單如下:
<template>
<div>
You clicked: {{ count }} times
<button @click="handleClick">
Click me
</button>
</div>
</template>
<script lang="javascript">
// 數(shù)據(jù)旅敷,以及處理邏輯抽離到另外一個(gè)文件
import { useCounter } from 'path/to/counter-hook'
export default {
setup() {
const { count, increment } = useCounter({ initialValue: 0, delay: 1000 })
return { count, increment }
}
}
另一個(gè)文件counter-hook
import { ref } from '@vue/composition-api'
export const useCounter = ({intialValue = 0, delay = 1000}) => {
const count = ref(intialValue)
const increment = () => { count.value++ }
return {
count,
increment: throttle(increment, delay)
}
}
function throttle(cb, duration) {
let shouldCall = true
return function(...args) => {
if (!shouldCall) return
const context = this
cb.apply(context, args)
shouldCall = false
setTimeout(() => {
shouldCall = true
}, duration)
}
}
這種寫法生棍,把數(shù)據(jù) 和 展現(xiàn)層進(jìn)行解耦。對(duì)于邏輯復(fù)雜的情況下媳谁,還可以將數(shù)據(jù)邏輯拆分到好幾個(gè)文件涂滴,進(jìn)一步分解數(shù)據(jù)處理邏輯。
另外晴音,展現(xiàn)層獨(dú)立于數(shù)據(jù)操作的情況下柔纵,團(tuán)隊(duì)成員可以分開并行開發(fā)UI和業(yè)務(wù)邏輯。同時(shí)锤躁,遵循了封裝變化的原則搁料。
組合式寫法進(jìn)階版(tsx)
這種方式,對(duì)于熟悉tsx
的開發(fā)者,可以獲得更精細(xì)的展現(xiàn)層控制郭计,以及類型推斷帶來的效率提升和bug率降低
// 注意霸琴,這里必須引入`h`,后續(xù)tsx語法依賴
import { defineComponent, h } from '@vue/composition-api'
// 數(shù)據(jù)昭伸,以及處理邏輯抽離到另外一個(gè)文件
import { useCounter } from 'path/to/counter'
export default defineComponent({
setup() {
const { count, increment } = useCounter({ initialValue: 0, delay: 1000 })
return () => (
<div>
You clicked: { count } times
<button onClick={increment}>
Click me
</button>
</div>
)
}
})