完成Vue3+typescript项目有感

77 阅读2分钟

vue的项目总给我一种玩具的感觉,小项目还好,到大一点的项目,或者交互复杂的项目就总会出现各种各样的问题,就需要做更多的补充措施.特别是项目大一点之后的维护更是让我难以接受,各种搜索,各种调试,才能找到问题.这是不是就是因为过于灵活导致项目代码风格的难以统一,毕竟大家有爹有妈,都不容易.所以我就打算试试用ts+vue3来试试能不能在多人项目中统一风格,方便维护,方便调试

既然要花时间进去,那就要看看解决的痛点:

  1. view层臃肿
    我总觉得子组件的作用就是为了让页面能组件化.那页面也应该分成由多个大的组件嵌套多个小的组件形成的.
    这样就可以在维护的时候能快速找到有问题的组件,不用花一大堆时间去看无用的组件,就好像下面那样,我看一下就可以快速定位组件了

WeChat38dbf52cc9599af3c75518c8d31a23bc.png

2. 格式不清晰
我每次要去找问题都遇到的问题,什么接口,什么字段出现的问题.页面据上维护的时间短还行,时间长了,我自己都不知道是个什么东西,直接想骂自己nt.不过现在ts的interface终于解决了这个问题,让我再也不用没头脑了

3. 方法属性 不清不楚
这个我保证大家都遇到的问题,在method和data里面是各种组件的东西,根本分不清这里面的作用.emit的方法更是到处都是,难以定位组件的属性,那就只能搜索了.我认为组件不应该只是view层要统一,在data层也是需要统一的.子组件负责维护数据(增删改查).业务性的东西就交给父组件来组合.出问题也好排查.
那父子组件的交互我觉得emit的方式不好用.在view层写了一个方法,然后搜索性的去找.这方式nonono.我认为既然是组件,那数据,属性,emit回调这些东西都应该是放在一起的.我定位到view层的组件,也能快速定位data层的组件

WeChat060efaaf34f5661f2c8c8942cf0aa434.png interface里面不应该只定义数据,也应该有组件的属性和组件的回调方法,用回调方法来代替emit.类似这样

WeChat9eb676f38d49999fa7274c33f1ed2dfd.png

WeChat11544bd4313d91284351425f583a40e5.png 在父组件上直接定义了子组件的数据,属性和回调方法,直接让父组件处理业务逻辑,我认为这样子组件更加清晰明了