簡(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>
)
}
})
