vue中mixins的使用方法和注意点

vue mixins的功能使用场景：

列表类页面，table，都有翻页，列表渲染方法，查看， 对经纬度做相同的数据格式处理，对于这种在多个页面，使用相同的方法和下拉数据的情况，可以适应混入组件的方法。
mixins基础概况

vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~

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

怎么用？

举个栗子：

定义一个混入对象

把混入对象混入到当前的组件中。
mymixin.js中的方法，和数据，合并进当前组件。
（总之就是你给我，那你的就是我的了，data数据和方法，直接可以使用）

用法似不似相当简单呀，有一下几点需要注意：

mixins的特点：
例子：
mixins.js 混入组件
test1.vue
test2.vue

01.

混入组件（mixins.js），可以复用到每一个vue组件, test1, test2组件，各自使用，互不影响。

02.

就近原则。 当mixins.js中的 data中的变量， 和 test1 中的data中的变量重复时， 以test1自己的为准，方法也是。

03

当 mixins.js test1.vue 都有钩子函数时，mixins优先执行。

04

mixins test1.vue 同时打印只有test1才有的变量时， 都打印test1的变量，不会报错。mixins 优先打印。

总体感知：

与vuex的区别

经过上面的例子之后，他们之间的区别应该很明显了哈~

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

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

与公共组件的区别

同样明显的区别来再列一遍哈~

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

参考