mixin详解

mixin混入，填充原vue文件，优先级较低，data，filter，computed，methods中会被原vue文件中的覆盖，钩子中的js会合并执行，执行顺序为：混入的顺序 > 原vue文件。

用腾腾的话说就是：vue文件就是海鲜汤（喜欢的话也可以是番茄汤），mixin进来的脚本就是调料包，调料包就是用来调节原汤的味道的，肯定不会覆盖原汤的原味的，这就是mixin这个调料包优先级低（同名属性以vue文件为主），后加调料包味道优先级高于先加的（混入的顺序优先级），但原汤味道还是发生了变化（钩子函数混合到一起）。

执行顺序示例

// mixinIndex1
export default {
  created(){
    console.log('mixinIndex1')
  }
}
​
// mixinIndex2
export default {
  created(){
    console.log('mixinIndex2')
  }
}
​
// 使用
export default {
  mixins:[mixinIndex1,mixinIndex2],
  created(){
    console.log('mixinIndex')
  }
}
// 得到的结果 mixinIndex1 indexIndex2 indexIndex
// 混入优先，原vue滞后；
// 混入多个的时候，按照 mixins 中的顺序

常用的写法

// mixinIndex.js
export default {
  data(){
    return {
      // 混入的data
    }
  },
  methods:{
    // 混入的methods
  },
}
​
// 一个混入文件导出多个混入对象
export const mixinIndex1 = {
  data(){
    return {}
  }
};
export const mixinIndex2 = {
  data(){
    return {}
  }
}
​
// 导出的混入对象为函数
mixins
--- index.js
--- mixinIndex1.js
--- mixinIndex2.js
--- mixinIndex3.js
// index.js
import mixinIndex1 from './mixinIndex1';
import mixinIndex2 from './mixinIndex2';
import mixinIndex3 from './mixinIndex3';
export default function (index){
  const mixinArray = [mixinIndex1,mixinIndex2,mixinIndex3];
  return mixinArray[index];
}
​
// 上面的index.js是mixin的入口，通过传入的index来匹配使用哪一个混入
// 因为导出的是一个函数，所以在使用的时候应该写成 mixins:[index(0)]；
// 保证这里的函数返回值结构符合混入的要求即可，所以这个函数千变万化
1. 自定义data参数 
export default (dataObj)=>{
    let obj = {...dataObj};
    return {
      data(){
        return obj
      }
    }
}
​
2. 结合路由的写法
// 需要先声明路由数据，
const routeData = [
  ["path1",{}],
  ["path2",{}],
  ["path3",{}],
]
 export default (path)=>{
    return {
      data(){
        return new Map(routeData).get(path)
      }
    }
}
​

注意，混入只会合并对应js导出的内容，并不是在混入js中引入就可以在原vue文件使用（导出的东西才是制作酱料包的原料，引入只是看了看又扔掉了哦）

// 混入脚本 mixinIndex.js
import test from './test.js'; // 假设test是方法结合 {}
export default {
  data(){
    return {}
  }
}
​
// 错误使用
 export default {
   mixins:[mixinIndex],
   methods:{
     doTest(){
       test.say(); // error test is not defined;
     }
   }
 }

处理方案

// 在mixinIndex.js中data，methods中接收test
import test from './test.js'; // 假设test是方法结合 {}
export default {
  data(){
    return {
      test
    }
  }
}
​
// 使用的时候重新引入 -- 这个与混入理念相违

其实腾腾最喜欢的写mixins的方式是将mixin写成函数的形式，以入参key的方式来判断使用哪一个，最终得到的写法会是下面这种：

// mixins/index1.js
export default {
​
  // 这里是即将混入内容
}
​
// mixins/index2.js
export default {
  // 这里是即将混入内容
}
​
// mixins/index.js -- 入口
import mixinIndex1 from './index1';
import mixinIndex2 from './index2';
const mixinsArr = [
  ['mixinIndex1',mixinIndex1],
  ['mixinIndex2',mixinIndex2]
]
export default function(key){
  return new Map(mixinsArr).get(key)
}

这样就是把所有的mixin统一起来，腾腾认为是会有助于后期维护的，你认为呢，哈哈哈。

前端: 设计你再把交互变个试试，我保证比你更快，设计是个弟弟。
设计: 是这样吗，原设计稿整体风格好像不合适。
前端: 设计小姐姐，这个设计图跟你本人一样，美若天仙，弟弟刚刚失嘴了。
………

未完待续……