Vue组件的tsx写法

简述

组件(Component) 是vue框架中最核心的概念,所有逻辑都围绕组件展开,得组件者,得天下。

这里我主要想说一下几种不同的组件写法,并阐明不同的写法的优缺点以及适用场景。

场景

这里通过一个简单的场景:统计Button点击次数,来展示不同的写法。

click-demo.gif

经典的三段式写法




这里,用template申明了表现层,data()返回组件所需的数据,methods申明了处理逻辑。

在简单的场景下,把表现层,数据,处理逻辑申明在同一个文件问题并不大,可读性也能接受。

但假设,在上面的基础上还需要增加新的需求:1秒内多次点击的情况下,只统计1次

这种情况下,我们就需要把组件改成如下:




改造之后,整个组件的逻辑部分开始膨胀。之前那种一目了然的感觉没有了。

数据部分data()多返回了一个shouldCount标志位,handleClick也结合标志位进行了相应控制。

这里把数据处理,转换,以及展示都混在一起了,造成了理解成本增加。

组合式写法(composition)

借助@vue/composition-api,使用组合式写法,组件可以简单如下:




                    
                    

你可能感兴趣的:(Vue组件的tsx写法)