【Vue进阶】Element组件库源码探索
标签：
从element-ui的源码中，可以学到组件库的设计，Vue的高级使用方式，组件的思想等等，对vue的进阶大有裨益，以下探索一下对我们比较重要的地方。
element源码目录结构
-
packages 里就是存放每个组件的源代码，如Select，input等等，便于维护和管理
-
index.js 根文件，将组件对外暴露
-
transition 动画类
-
directives 全局指令
-
locale 国际化
-
utils 工具方法集
-
mixins 库用到的混合
组件的install
在main.js中，以Form组件为例：
import { Form } from 'element-ui';
import Vue from 'vue';
Vue.use(Form);
先看看以上代码中发生了什么：
注意看下面这张图，在Form组件的index.js的文件中，
我们可以看到，它有个install的方法，这是vue封装第三方插件的标准写法。
总结：当调用Vue.use方法的时候就会调用组件的install方法，将Vue注入到组件中去来实现组件的全局注册。
provide / inject 依赖注入
父组件向它的后代组件注入数据**
**
- 祖先组件不需要知道哪些后代组件使用它提供的属性
- 后代组件不需要知道被注入的属性来自哪里
直接看源码，以Form组件和它的子组件Input为例：
Form组件中：
Form组件中provide将其自身注入到后代组件中，然后
input组件中：
通过inject的方式来拿到Form组件的内容，然后做一些表单验证的操作。
总结：使用依赖注入的方式，可以避免组件之间的逐级传递。缺点是耦合度上升，日常开发中避免少使用，可以用vuex等方案来代替，尽量做到组件之间解耦。
mixins 混入
向vue组件中混入配置，注意：生命周期函数混入的话，是先执行混入的方法，再执行原来的方法，看一下官方例子：**
**
这里是先执行混入的created，再执行原组件的created。再来看element中的一个简单应用：
focus.js：
定义了一个聚焦的混入函数，返回值是mixin，然后在Select组件中引用：
此时ref为reference的组件就混入了focus。
总结：当有多个组件有用到相同的data，methods，life hooks等等，都可以用mixins抽象出来复用。
