Mixin混入对象的理解与使用

Mixin混入对象

前言：在做项目的过程中发现在学姐的代码中大量使用了mixin混入对象，当时自己还未完全理解这个对象的使用方法，没有使用。现在回看，当时若是使用了此方法，则会简化好多页面中相同的部分。下面对mixin混入对象进行了简短的汇总。

1、含义：

• 接收一个混入对象的数组，可复用功能非常灵活的方式
• 此混入对象可以像正常的实例对象一样包含实例的选项，使用Vue.extend()一样的选项合并逻辑到最终的选项中

2、使用方法：

2-1 js文件中混入对象的定义

• 在建好的vue项目的src文件夹中建立mixins来存放混入对象的js文件

• 在建立好的js文件可以来定义的内容–和vue的组件中定义的属性大致相同：data、components、methods、created、computed等属性

• 定义好属性之后必须进行导出对象

  //导出方式一
  export const 对象名 =	{}
  //导出方式二
  const 对象名 = {}
  export default 对象名
  

2-2 页面中使用Mixins

• 页面中引入Mixins

  import 对象名 from ...  //导入文件中
  export default {
      mixins: [对象名]
  }
  

• 可以在mixins中多定义一些多个页面中均使用的内容，可节省时间

3、Mixins的特点

• 方法和参数在各组件中不共享

  • eg：当混入对象中一个变量a：1，一个组件中a++得到a为5，此a=5在其它组件中并不共享，其他组件中接收到的初始值为混入对象的a：1

• 值为对象的选项

  • 选项会被合并，如methods,components等，当有相同命名或其他冲撞的情况下优先执行组件中的

• 值为函数的选项

  • 被合并调用，如created,mounted等，同一个钩子函数里，会先执行混入对象的东西，再执行组件

• mixins和vuex的区别

  • vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

  • Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

4、Mixins使用重复强调注意点

• mixins可以定义公用的变量，在每个组件中使用，引入组件后各个变量之间是相互独立的，组件间的变量的改变不会相互影响。
• 在页面和mixins.js文件中同名的钩子函数会合并成一个数组，两者均会调用，混入对象先调用
• 在页面和mixins.js文件中值为对象的相同选项，如methods，components，directives等，以页面里面的为准