Vue組件的tsx寫法

簡(jiǎn)述

組件(Component) 是vue框架中最核心的概念情妖,所有邏輯都圍繞組件展開睬关,得組件者,得天下毡证。

這里我主要想說一下幾種不同的組件寫法电爹,并闡明不同的寫法的優(yōu)缺點(diǎn)以及適用場(chǎng)景。

場(chǎng)景

這里通過一個(gè)簡(jiǎn)單的場(chǎng)景:統(tǒng)計(jì)Button點(diǎn)擊次數(shù)情竹,來展示不同的寫法藐不。

click-demo.gif

經(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() {![click-demo.gif](https://upload-images.jianshu.io/upload_images/11213662-443cdec75b5608c3.gif?imageMogr2/auto-orient/strip)

    const { count, increment } = useCounter({ initialValue: 0, delay: 1000 })
    return () => (
      <div>
        You clicked: { count } times
        <button onClick={increment}>
          Click me
        </button>
      </div>
    )
  }
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末梧乘,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子庐杨,更是在濱河造成了極大的恐慌选调,老刑警劉巖酝惧,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谊惭,死亡現(xiàn)場(chǎng)離奇詭異觉义,居然都是意外死亡时肿,警方通過查閱死者的電腦和手機(jī)闽瓢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門胁住,熙熙樓的掌柜王于貴愁眉苦臉地迎上來层宫,“玉大人学密,你說我怎么就攤上這事揭蜒『峄耄” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵屉更,是天一觀的道長(zhǎng)徙融。 經(jīng)常有香客問我,道長(zhǎng)瑰谜,這世上最難降的妖魔是什么欺冀? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮萨脑,結(jié)果婚禮上隐轩,老公的妹妹穿的比我還像新娘。我一直安慰自己职车,他們只是感情好鹊杖,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布骂蓖。 她就那樣靜靜地躺著,像睡著了一般茫孔。 火紅的嫁衣襯著肌膚如雪缰贝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天赋朦,我揣著相機(jī)與錄音宠哄,去河邊找鬼毛嫉。 笑死妇菱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的辛臊。 我是一名探鬼主播房交,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼刃唤!你這毒婦竟也來了白群?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤笼裳,失蹤者是張志新(化名)和其女友劉穎侍咱,沒想到半個(gè)月后密幔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胯甩,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡偎箫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年眉枕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了怜森。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片副硅。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡恐疲,死狀恐怖腊满,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情培己,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布省咨,位于F島的核電站,受9級(jí)特大地震影響茸炒,放射性物質(zhì)發(fā)生泄漏愕乎。R本人自食惡果不足惜壁公,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一感论、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧紊册,春花似錦比肄、人聲如沸囊陡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嘹害,卻和暖如春笔呀,著一層夾襖步出監(jiān)牢的瞬間幢踏,已是汗流浹背许师。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工微渠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留搭幻,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓敛助,卻偏偏與公主長(zhǎng)得像粗卜,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子纳击,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容