我们都极其痛恨浪费时间。可是当我们在编写Vue程序时,却因错误的方式不知不觉的浪费掉了时间，其实我们本可以在一开始就用对的方式。
但是，我们又很难知道到底应该学习什么,这就是我为什么把这26 个教你如何避免常见的 浪费时间的事 的文章整理成列表的原因。
一旦你看完这一系列的文章，你能分享给其他人，来帮助它们也节约时间。
1. 再一切还来得及之前使用 Vuex
如果你正在构建一个中性到大型应用，你的应用状态（即要跟踪的所有数据）可能变得相当复杂难懂。
这不仅仅指你要处理的数据量，状态和状态的所有不同的改变之间的不同交换都会增加其复杂性。
而管理状态是件困难的任务，所有 有许多的 bug 和浪费时间的事都是由于非常复杂的状态和逻辑造成的。因此Vuex被创建出。
了解更多关于Vuex解决的问题，以及怎样在你的应用中使用Vuex,可看看 Anthony Gore的文章-Vuex 是什么？ Vue
应用数据存储初学指南
2. 理解 Vue 组件实例的工作方式
Vue 设计的非常巧妙，可以提高性能，并且减少其内存占用。尽管没有必要，但是随着你构建越来越多的 vue 组件，了解 vue 组件的工作原理只会对你有所帮助。
理解 Vue 组件实例,是一篇简短但是信息量大的文章，由Joshua Bemenderfer所写，谈的是 Vue 如何创建组件实例。
3. 用正确的方式，强制 Vue 去重新渲染
在 99%的情况下，某些东西没有必要去重新渲染。这是一个反应性（reactivity）的问题。
如果你是一个 Vue 新手，你一定需要去尽可能的多了解学习 vue 的反应性。我认为这是新手开发者最大的阻塞点（难点）之一。
有时，强制组件去重新渲染实际上是做好的方法。（但是非常非常少见）
迄今为止，我最受欢迎的文章-重新渲染组件的正确方法
4. Vue 不能处理多个根节点
并非所有组件都只有一个根节点。 例如，如果你要渲染一个项目列表，简单的把节点列表当数组返回可能是更合理的方法。为什么没有必要把它们包装在ol或ul标签内呢？它被叫做文档片段（fragment）
文档片段
DN 描述：DocumentFragments 是 DOM 节点，但它们不是 DOM 树的一部分。通常的使用场景是创建一个文档片段，然后将创建的 DOM 元素插入文档片段中，最后再把文档片段插入到 DOM 树中。在 DOM 树种，文档片段会被替换为它的所有子元素。
因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入文档片段不会引起页面的回流（对元素位置和几何上的计算）。所以，使用文档片段通常会起到优化性能作用。
现阶段 Vue 是不支持文档片段，在 VUe3 中会支持它们。
React 现在已经支持文档片段了，为实现此功能，React 团队重新了它们的渲染系统。Vue 也是如此。
然而，在等待 Vue3 发布之前，你可以使用功能组件来解决这个问题。你也可以阅读文章Vue 模板 能否有多个根节点(fragments)?了解更多。
5. 使用 vuelidate，一个简单的方法来验证你的表单
表单是我们从用户那获取输入的主要方式，而且它对 我们的应用程序良好运作是至关重要的。
然而，表单的构建也非常的棘手。在表面上，它似乎应该相当容易编写，但是，但你开始添加验证规则和其他逻辑，它很快会变成一场噩梦。
这就是Vuelidate的用武之地。它是一个库，可以非常容易的去添加自定义验证，并为你完成所有繁重的工作。
了解怎样设置 Vuelidate 验证，阅读Vulidate-简单的 vue 表单验证
6. 构建彼此可以很好合作的组件
最糟糕的感觉就是你意识到你之前以错误的方式构建了组件，现在不得不完全重构它。你不想过度设计你的代码，但是许多时候，像这样的事能在一开始就可以避免的。
Kevin Ball 写了篇文章，概述了在编写组件时要记住的几件不同的事情，以保证组件与其他组件之间的友好关系。
阅读这篇文章-如和构建运行良好的组件
7. 不要编写一次新的过渡效果，让它们可以重用
过渡是 Vue 一个非常酷的特性。它是一种很简单的方法，可以在你的应用添加漂亮动画。但是你不想一遍又一遍的重复写相同的东西？在 Vue 中创建可重用的过渡是一篇好文章，CirstiJora 向我们展示了，如何编写一个可以重用的过渡的组件。它还展示了一些很棒的感念，来使我们的代码更加重用，也可以很好的应用到程序的其他地方。
8. 了解如何使用axios获取数据
几乎没有应用程序都需要获取或上传数据，目前最流行的能帮助我们实现这一点的库就是Axios。它是可配置的，并且使处理外部数据是变得非常容易。
大多数情况下，你能使用浏览器内建的fetch，但是无论如何，最后你大概率会为此写一个包装器，以便能更方便的处理一般常见情况。
阅读使用 Axios 的 Vue TEST Api，学习怎样把Axios集成到你的 vue 应用中。
9. 使用vue-router处理客户端路由
如果你正在做客户端路由，手工生成自己 的解决方案并不困难。匹配路由，然后在不同组件之间切换，实际上是很简单的。但是，使用vue-router会更加容易，它也是 Vue 官方的包，因此它 在 vue 中是很好 用的。
当你在处理查询参数，路由参数，嵌套路由，动态路由匹配…,编写你的解决方案将变的非常的复杂。 使用vue router代替把。vue router 指南
10. 创建过滤器来重用 格式化
格式化数据以显示在屏幕是很烦人的。如果你处理的是大量数字、百分百、日期、货币、名称或其他类似的东西，你可能会需要些函数来格式化这些数据。
Vue 有个很棒的特性叫过滤器(filters),它的灵感来自 Angular。
它们可以让轻松的封装些格式化的函数，并且使用非常干净的语法在模板中使用它们。
阅读该文章如何在 Vue 中创建过滤器,这是一篇非常详细是文章，有很多关于如何编写过滤器的例子
11. 确保避免烦人的错误和警告
Vue 也有很好的警告和错误消息，但是如果你一致收到它，就会很烦人。为什么不干脆完全避免它呢？
12. 不要害怕 JSX，它是非常强大的
有许多人被 JSX 吓到了，它语法怪异，很难理解如何使用它。
但是，有时，尤其是在编写高可用性的组件，模板不能解决问题时。你需要充分利用 render 函数的强大力量,JSX 是最简单的方法之一。
Samuel Oloruntoba 写了篇很好的介绍 JSX 的文章。在 Vue 中使用 JSX，为什么你应该关注？
13. 弄清楚如何对鼠标悬停做出反应
我已经写了一篇关于如何在 vue 中使用悬浮的深入文章，它覆盖了很多你想了解的事情：
- 如何实现悬浮效果
- 如何显示一个元素，当鼠标移入时
- 鼠标移入，如何动态的更新 class
- 如何在定制组件上实现
14. 添加 v-model 支持到自定义组件
vue 为我们提交了 v-model，这是一种为我们创建双向绑定的语法糖。它对输入非常有用，因为它大大简化的对输入的处理。
我们也可以添加 v-model 支持到我们的组件中，添加 v-model 支持到自定义组件一文向我们展示如何实现它。
15. 修复”this is undefined”错误
或许是最常遇见的错误之一，但是现在我完全知道我哪里出差了。它与你使用的函数类型，以及如何使用它有关。如何解决”this is undefined”错误
15. 使用现成的 Css 框架
16. 观察 Vue 中的嵌套数据
观察者是 vue 中非常好的一个特性，除非你尝试在数组、或对象上使用它们。
观察嵌套数据结构（像数组或对象）是有点棘手的。
如何观察嵌套数据是一篇深入的文章，也包含一下观察者中更高级的特性。
17. 显示异步组件加载时的错误状态
现在，你可能听说了关于 web 性能的内容，最简单的方式，就是将代码分割成多个更小的块，vue 对此支持时一流的。
但是，如果我们在获取组件时不能提供良好的状态，用户的体验可能会受到影响，并且出错时，我们还想展示出很好的出错状态。幸运的，整合它们并不困难。
vue 中显示异步组件加载、错误的状态一文，向我们展示了如何实现。
19. 清楚干净 props
有的组件仅需要几个 props，但是也有的组件需要传很多很多 props，最后会变的非常混乱。
但是有几种不同的方法可以解决此问题，这不仅使我们的代码更加容易查看，也更容易理解和在将来也更容易修改。
将多个 props 传递给 vue 组件,这是一篇很棒的文章，概述了清理 props 的不同方法。
20. 不要混淆 prop 的计算属性 和 观察者
许多人本来要使用观察者时却使用了一个计算属性，或者在观察者更合适时使用了计算属性。
尽管它们看起来做了相似的事情，但实际上watchers和 computed 是完全不同的。
了解更多-计算属性 和 观察者的不同
21. 当心 Vue 中常见的陷阱
22. 了解 props 和 data 之间的区别
vue 有两种不同的方式存储变量，props 和 data，一开始可能让人很困惑，因为它们看起来做到是类似的事情，也不知道什么时候一个，什么时候用另一个。
答案设计到反应性，命名空间冲突、数据流的流向。
它是一个很重要的该内容需要掌握，所有请一定要理解它，
props 和 data 不同之处 一文，详细介绍在哪里使用它们，以及如何一起使用它们。
23. 在页面加载时，正确的调用方法
在 web 应用中，当页面加载完后立即执行某些逻辑时非常常见的模式。通常，你正在获取数据、甚至以某种形式操作 DOM。
但是，使用 vue 会有许多错误的方法。幸运的是，Vue 为我们提供了生命周期钩子，使我们能够以一种干净、简单的方式完成。
如何在页面加载时调用 Vue 方法，这篇文章，深入的讨论了什么是生命周期、如何与它们挂钩。
24. 理解如何将一个函数作为 prop 传递
在两种情况下，需要传递一个函数：
- 从子组件传递信息到父组件
- 以特定的方式抽象组件行为
在 React,可以任意传递函数，但是 Vue 给了我们 2 种独立的机制来解决上面 2 个问题。
- 事件(events)
- 作用域插槽(scoped slots)
25. 为什么修改 props 是一个反面模式
避免直接修改 prop，因为当父组件重新渲染时，它的值也会被覆盖修改。可以使用一个 data 或者 一个基于 props 值的 computed 属性来代替。
26. 动态的添加 class 类
根据程序的状态从元素中添加或删除 class 类，是 web 应用中一个非常常见的模式。
动态的添加/删除 class 类，它包含数组语法、对象语法、使用 js 表达式计算 class，然后添加动态的 class 类到指定组件。
gist
- token:106553587adac707d5a8731260066c80af31d875
- id:73b2958ea4e29be84efb7ca2a72d3ae3
