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统一起来,腾腾认为是会有助于后期维护的,你认为呢,哈哈哈。

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

未完待续……

Logo

前往低代码交流专区

更多推荐