VUE mixin混入功能浅析

vue mixin混入浅析

• 首先来看官网对mixin的定义：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

• 人话

官方文档给出的解释略显晦涩，使用混入的最大作用就是偷懒 复用，混入对象的语法和vue一致，涵盖了Data、methods、Components、LifeCycle Hooks（生命周期函数）、Directives（指令）、路由钩子函数等，若需要在项目的多个组件中复用一些功能如：操作成功、操作失败、数据加载Loading状态，或者一些通用的数据，就可以借助Vue的混入（Mixin）功能，将通用的组件or数据与当前组件结合，以此节省copy的时间和减少代码冗余，结合优先级以及规则下文给出

- 直接上代码

• 首先在文件夹中定义一个mixin.js文件 用于存放通用功能
  

• 在mixin.js中*发挥(记得前面要加上export！！！！！！)
  

• 项目中局部引用
  

• 下面没有了

  使用就是这么简单

需要注意的事情

1.Data数据，数据对象在内部进行递归合并，并在发生冲突时以组件数据优先
2.钩子函数，created、mounted等同名钩子函数会合并成一个数组，都将被调用。混入对象钩子函数优先执行
3.对象选项：components、methods、directives等对象，会被合并为同一对象。如果出现了相同键值对，则当前组件中的键具有优先级
4.生命周期是混入的先调用再调用父组件的，对象的比如methods等如果冲突就是以父组件的为主
5.同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用
6.不同组件局部引入mixin，数据是共享的，但是在不同父组件之间，并不能通过混入通信

此外 请慎用全局引入(当然 这里也没说怎么全局引入，请查看官方文档)

因为如果使用了全局混入，那么将影响每一个新创建的Vue实例 切记