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