关于 vue 全家桶的四个 “最佳实践”

前言

在读这篇文章之前，我想先安利大家一个东西：

看到这副黑框眼镜，你是不是想到了什么？

对，就是它：Vue.js 组件编码规范。读过的同学忽略，没读过的同学有时间的话请花 20 分钟认真看看，文章的内容都是在认可这篇规范的基础上展开的。

另外，本文中的“最佳实践”（注意引号），全都是一家之言，不一定对，欢迎各路大佬讨论拍砖。

实践一：如何分类组件

组件（component）是 vue 最核心的概念之一，但是正因为这一概念太过宽泛，我们会在实际开发中看到各种各样的组件，对开发和维护的同学带来了很大的困惑和混乱。这里我把组件分成四类：

view

顾名思义，view 指的是页面，你也可以把它叫做 page。它的定义是：和具体的某一条路由对应，在 vue-router 配置中指定。view 是页面的容器，是其他组件的入口。它可以和 vuex store 通信，再把数据分发给普通组件。

global component

全局组件，作为小工具而存在。例如 toast、alert 等。他的特点是具备全局性，直接嵌套在 root 下，而不从属于哪个 view。global component 也和 vuex store 通信，它单独地使用 state 中的一个 module，这个 state 中的数据专门用来控制 gloabl component 的显隐和展示，不和其他业务实体用到的 state 混淆。
其他组件想修改它，可以直接派发相应的 mutation。而要监听它的变化（比如一个全局的confirm，确认之后在不同的组件中触发不同的操作），则使用全局事件总线（event bus）。

simple component

简单组件。这种组件对应的是 vue 中最传统的组件概念。它的交互和数据都不多，基本上就是起到一个简单展示，拆分父组件的作用。这种组件和父组件之间通过最传统的方式进行通讯：父组件将 props 传入它，而它通过 $emit 触发事件到父组件。
简单组件内部是不写什么业务逻辑的，它可以说是生活不能自理，要展示什么就等着父组件传入，要干什么就 $emit 事件出去让父组件干，父组件够操心的。

complex component

复杂组件。这种组件的特点是，内部包含有很多交互逻辑，常常需要访问接口。另外，展示的数据也往往比较多。如下图。

图中红框内部的就是一个复杂组件的实例。它是一个大列表的列表项，展示的数据很多，而且点击左下角的几个 button，还会弹出相应的弹窗，弹窗内有复杂的表单需要填写提交···逻辑可以说是相当复杂了。如果这时我们还拘泥于简单组件的那种通信方式，衣来伸手饭来张口，啥事儿不干，那么：
1.所有的 props 都由父组件一一传入，如果有十几个乃至几十个要展示的数据，那么父组件