• 什么是 mixins？

        Vue官方文档是这样描述mixins的：

        mixins是一种分发Vue组件中可复用功能的一种灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

        mixins是一个JavaScript对象，可以包含组件中的任意选项，比如Vue实例中生命周期的各个钩子函数，也可以是data、components、methods或directives等。在Vue中，mixins为我们提供了在Vue组件中复用功能的方法。使用方式很简单，将复用的功能以对象的方式传入mixins选项中。当组件使用mixins对象时，所有mixins对象的选项都将被混入该组件本身的选项。

• mixins有什么用？

        示例代码如下：

        1、首先定义一个混入对象

         2、然后，把混入对象混入到当前组件中：

• mixins 特点
  

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

        如混入对象中有一个 cont:1的变量,在组件A中改变cont值为5，这时候在组件B中获取这个值，拿到的还是1，还是混入对象里的初始值，数据不共享。示例如下：

4.1 值为参数的选项

        混合对象中的参数num

        组件1中的参数num进行+1的操作。

        组件2中的参数num未进行操作。

        查看两组件中分别输出的num值。

        可以看到，在组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值。

4.2 值为对象的选项

        如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的方法。比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法。

        混入对象中的方法：

组件中的方法：

        打印台的输出

 4.3 值为函数的选项

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

        混入对象函数中的console：

        组件函数中的console：

         打印台打印：

• 与 vuex 的区别

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

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

总结：

        在开发中，我们可以单独创建一个js文件，在该文件中声明一个mixins对象，然后将组件或页面共用的属性或方法定义在mixins里边，并暴露出去，在需要使用到的组件中引入该js文件即可；

        当组件中定义了相同的属性或方法时，组件里边声明的属性或方法优先级高于mixins；

        虽然mixins中的属性或方法可以被多个组件或页面共用，但是在某个组件或页面中修改相关属性或方法时，不会对其他组件或页面造成影响。

        通过以上内容我们知道了vue mixins是什么？有什么用？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！