Vue中的mixin，是来散发Vue组件中的可复用性能。
1、办法和数据在各个组件中不共享
不像vuex那样，一个中央批改其余中央也会批改，mixin的数据的作用域就是被引入的组件外部。
2、援用组件中的钩子函数在混入对象中的钩子函数前面执行。
3、援用组件中的同名办法会笼罩混入对象中的办法，不同名的会合并。
4、案例剖析
HelloWorld.vue
<template> <div class="hello"> <div v-for="(item, index) in mixinData" :key="index"> 姓名：{{item.name}}， 年龄：{{item.age}} </div> </div></template><script>import CommonMethods from '../mixin/CommonMethods.vue'export default { name: 'HelloWorld', mixins: [CommonMethods], data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted () { // 1、援用组件中的钩子函数在混入对象中的钩子函数前面执行。 this.mixinData = [ { name: '初始化数据', age: 10 } ] // 2、援用组件中的同名办法会笼罩混入对象中的办法，不同名的会合并。 this.mixinGetData() }, methods: { mixinGetData () { this.mixinData = [] return [] } }}</script>CommonMethods.vue
<script>export default { name: 'mixinMethods', data () { return { mixinData: [] } }, mounted () { this.mixinData = [ { name: '初始化数据', age: 0 } ] }, methods: { mixinGetData () { let data = [ { name: 'zxc', age: 32 }, { name: 'lvy', age: 27 } ] this.mixinData = data return data } }}</script>