[译] 怎样更好地使用 Vue：我在新工做中遇到的一些问题清单

• 原文地址：How not to Vue: A list of bad things I’ve found on my new job
• 原文做者：Anton Kosykh
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：sophiayang1997
• 校对者：kezhenxu94 xxholly32

下面列举一些人的作法。

不久以前，我找到了新工做。并且当我第一次看到代码库的时候，这真是吓坏我了。所以我想在这里展现一些你应该避免在 Vue.js 应用程序中出现的代码。

data/computed 中的静态属性

咱们没有理由将静态属性传递给 data，特别是 computed。当你这样作时，Vue 将其声明为响应式属性，可是这是没必要要的作法。

DON’T. phone 和 city 的响应性毫无用处。

DO. 将静态属性传给 $options。它更加简短，并且不会作多余的工做。

考虑将非响应式（non-reactive）的数据转变为响应式（reactive）

请记住：Vue 不是神通广大的。Vue 并不知道你的 cookies 什么时候才会更新。

我提到 cookies 的缘由是：个人同事曾经花两个小时去搞清楚为何他的计算属性没有更新。

DON’T. 计算属性应该只基于 Vue 的响应式数据去使用。不然，它将不会起做用。

DO. 手动更新你的非响应式数据。

此外，我建议你不要在计算属性中使用任何边数据（side-data）。你的计算属性中不该该有任何反作用。这样作会为你节省不少时间。相信我。

只应该被调用一次的混入（mixins）对象

一听到我说 mixins 很好，立刻就有人关闭这篇帖子了… 其实 mixins 在一些状况下仍是很好用的：

1. 建立能够修改 Vue 实例的插件，提供新功能。
2. 在不一样的组件或者整个应用程序中使用通用的特定方法。

除非有人在 mounted 钩子上注册了一个执行效率很是缓慢的全局混入对象。为何不推荐这样作呢？由于在每一个组件挂载时该全局混入对象都会被调用，但原则上它只能被调用一次。

我不会展现这一段代码。相反，为了使它更清晰，我会给你一个更简单的例子。

DON’T. 避免在混入中（mixins）中执行此操做。它会在每一个组件挂载时被调用，即便你并不须要这样作。

DO. 在根实例中执行此操做。那么它只会被调用一次。你仍然可使用 $root 访问结果。

setTimout/setInterval 的不正确使用

在一次面试中，我团队中一个前端开发者问我是否能够在组件中使用 setTimout/setInterval。我回答“能够“，但还没来得及解释如何正确使用它，我就已经被指责不够专业了。

如今我必须维护某一我的的代码，所以我将这一段文字献给他。

DON’T. 你可使用间隔（intervals）。可是若是你忘记使用 clearInterval，就会在组件卸载时出错。

DO. 在 beforeDestroy 钩子中使用 clearInterval 来清除间隔。

DO. 若是你不想这么麻烦，能够考虑使用 vue-timers。

变异的父实例

这是 Vue 中我最不喜欢的设计了，真心但愿有一天能把它移除（雨溪，拜托你了）。

我没有见过使用 $parent 的真实用例。它会使组件变得更加呆板，而且会产生一些让你意想不到的问题。

DON’T. 若是你试图去改变 props，Vue 会警告你，可是若是你经过 $parent 去改变 props，Vue 将没法检测到。

DO. 使用事件触发器（events emitter）去监听事件。此外，v-model 只是 value 属性和 input 事件的语法糖。

DO. Vue 还有一个语法糖：.sync 修饰符用于更新 update:prop 事件中的 prop。

If/else 表单验证

当我发现一些须要手动验证的表单时我感到很是困惑。它会产生大量无用的样板代码。

DON’T. 我在新项目中被相似的代码吓坏了。不要再这样愚蠢了，这个问题有不少可行的解决方案

DO. 请使用 vuelidate。对于每一个字段只须要一行验证规则，多么整洁且具备声明性的代码。

DO. 我也制做了一个容许你使用一个对象声明表单数据和验证的小插件。

最后

这些固然不全是 Vue.js 初级开发者的罪过，而且我相信这份问题清单多是无限的，但我认为这份清单已经足够了。

那么，若是你在 Vue.js 项目中看到了什么“有趣”的东西，能够在这里回复我 :)。

谢谢阅读！记住不要重复愚蠢的错误 :) 特别鸣谢为 carbon.now.sh 作出贡献的人。奶思！

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。