阅读 482

在蒙特利尔的一个Vue前端新手开发总结 | 掘金征文

🌟关于:

我目前在蒙特利尔的一家中小型软件公司做前端。在此之前并没有使用过JavaScript,但是有一些C++,C#之类乱七八糟的经验。使用Vue大概是从去年11月入职开始的。写此文的主要目的是得奖,顺便交流一下Vue的使用。如果有写的不好的,不对的地方欢迎大家批评,批评的越热烈越好,谢谢。

🌟️️️Vue开发经验:

虽然前端开发的时间很短,我认为有几个值得注意的地方需要总结一下:

  • ️Watcher 的使用:
    对于Vue中的Watcher,基本上我是持否定态度的。 原因在于我们公司的工程非常复杂,包含大量的组件,不同的组件可能不同的team都会对其进行修改,有些组件使用watcher之后代码质量堪忧。基本上watcher有以下几个缺点:
    1. 在使用了watcher之后数据流向很难一眼看清楚,过一段时间之后再来阅读代码非常浪费时间。
    2. 对写测试十分不友好,watcher经常会在不需要的地方触发,用event的代码写测试就较容易。
    3. 使用watcher会造成代码冲突,甚至会造成循环触发。我在代码中甚至见过动用debounce函数减少watcher的互相触发。这是我在其他team的代码发现的,如果让我code review这肯定不让过的。这里应该改成event触发。另外,这一条应该还包含watcher互相覆盖,一个组件watch a;另一个组件又watch了a.b。这两个组件有时候又不是一个人写的。出现了bug,再使用各种hack解决,在我看来实在是令人发指。
    4. 错误的暗示:使用watcher隐含的暗示是有多种改变值的地方或方法。使用event没有这个问题。

      总之,应该尽量使用event;如果不能实现或者不好实现,应该使用computed;基本上Vue里面没有必须使用watcher的地方。如果有,基本上都可以改成event或者computed实现。我怀疑喜欢使用watcher的玩家都是前端老玩家,可能是用习惯了;虽然我是新手,但是我觉得我还是能看出来这里面的一些问题。Anyway,千万不要滥用watcher。重复一遍我的观点,能不用就不用。
  • 关于Updated hook
    这个钩子虽然不常用,它的缺点跟watcher十分类似。连官方文档都不推荐使用,总之如果一定要使用,最好写注释解释清楚为什么非用不可。
  • ️关于测试:
    关于Vue的测试我们使用的也是大家常用的组件 vue-test-utils 和jest。
    关于vue-test-utils 没什么好说的,基本上大家最好能使用最新版本就好了。我们还在用一个很旧的版本,我也在建议推动更新版本。但由于很多已经存在的测试都与新版本兼容困难,导致我们的升级一拖再拖。所以,能升级千万别拖。 关于jest,我的确发现了很多jest与实际浏览器不同的地方;换句话说就是jest不能支持的所有的浏览器特性。具体哪些不支持基本上在它的issue列表里面都可以看到。我们目前也在尝试使用Cypress来进行UI的测试,我认为这是一个对测试巨大的补充。 关于test,另外一个好处是在写test的过程中,可以发现一些组件的隐藏错误,比如子组件prop设置不对等问题。
  • 关于Vuex:
    这个东西我虽然没有主动使用过(都是被动使用),但是我们的代码里面充斥这个这个东西。在我看来,使用这个东西没有任何意义。使用它在很大程度上是过度设计,或者设计失误造成的。部分西方前端玩家,喜欢设计,尤其喜欢过度设计。一顿设计猛如虎,一看代码狗不如。 极端的例子是,我们甚至还需要重构代码,减少Vuex的使用来提高性能。

🌟 其他Vue相关:

  • ️关于code review:
    我认为code review是很有必要的。可以检查出一些简单的错误,甚至一些逻辑错误。当局者迷,旁观者清。如果你们没有进行code review,建议尝试。

  • 关于Vue在国外的使用情况:
    我是在蒙特利尔,法语区,仅谈一下我看到的。Vue是View的法语写法,我不知道是不是因为名字是法语造成了在蒙特利尔地区的流行。我也参加过几次本地的meetup,我发现来的人还是很多的(疫情来了就没参加过了)。而且在蒙特利尔甚至还会有某些类库的作者来演讲,有时候去听听也能有不少收获。而且有时候有招聘的环节,我发现都是招聘Vue开发者的比较多;很少有人来找工作的。我想原因还是Vue缺人,可能还是react更流行一些。但是我感觉随着Vue 3的发布,使用Vue的公司会越来越多。

  • 关于Vue的编辑器: 我们公司内目前使用VS Code 的越来越多;感觉Web storm 逐渐颓势。VS Code加上Vetur,Eslint,airbnb standard等一系列Vue/JS相关扩展,极大的增强了编辑器的易用性。甚至在某种程度上减少了bug的出现。

以上内容基本上是针对Vue写业务代码。如果你是在写组件,类库或者更高级的内容,我认为参考意义不是特别大。基本上就是这么多内容了,如果有任何意见或者疑问欢迎评论。如果发现错误,请提出我也会进行修改。留下你的评论,可以帮助更多的人,谢谢。

掘金征文 | 2020 与我的年中总结 征文活动正在进行中......