vue中使用mixins/extends传入参数的方式

使用mixins/extends传入参数

最近做报表页面，基本都是列表页面，所以想用mixins。

但是接口的url不同，于是考虑怎么才能传入参数去适配各个页面。

后来发现mixin文件可以写个函数，接受传递过来的参数，然后return一个对象。

大概如下：

mixin.js

export default function(config) {
  let {
    listUrl="",
    exportUrl=""
  } = config;
  return {
    created() {
      console.log(listUrl);
      console.log(exportUrl);
    }
  }
}

xxx.vue

import Mixin from './mixin';
let mixin = new Mixin({
  listUrl: "www.baidu.com",
  exportUrl: "www.yahu.com"
})

export default{
  mixins:[mixin],
}

extends也是差不多。

vue mixins的原理

以前一直以为mixins在vue里面应该不是很重要，只是提供了一个混入的api，慢慢的才知道mixin在vue里面非常重要。生命周期、vuex等都有mixin的影子，在内部算是很重要的一个api。

先上精简过后的源码：

export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
]
const strats = {};
function mergeHook(parentVal, childValue) {
  if (childValue) {
    if (parentVal) {
      return parentVal.concat(childValue);
    } else {
      return [childValue]
    }
  } else {
    return parentVal;
  }
}
LIFECYCLE_HOOKS.forEach(hook => {
  strats[hook] = mergeHook
})

上面这部分很好理解，是生命周期的合并，下面判断有这些生命周期的key的时候，直接调用strats[key](parent[key], child[key])，我们都知道生命周期的mixins是先执行mixins的再执行当前组件的，所以直接concat，后面执行循环调用的时候就是这个顺序。

export function mergeOptions(parent, child) {
  const options = {}
  if (child.mixins) {
    for (var i = 0, l = child.mixins.length; i < l; i++) {
      var mixin = child.mixins[i];
      parent = mergeOptions(parent, mixin);
    }
  }
  for (let key in parent) {
    mergeField(key)
  }
  for (let key in child) {
    if (!parent.hasOwnProperty(key)) {
      mergeField(key);
    }
  }
  function mergeField(key) {
    if (strats[key]) {
      options[key] = strats[key](parent[key], child[key]);
    } else {
      if (typeof parent[key] == 'object' && typeof child[key] == 'object') {
        options[key] = {
          ...parent[key],
          ...child[key]
        }
      }else{
        options[key] = child[key];
      }
    }
  }
  return options
}

这边生命周期是单独判断，其他熟悉方法则是一起的，比如方法methods，如果父和子都有，就结构合并在一起。因为mixins用法可以传入一个数组，这边还需要优先判断是否有mixins字段，有就要递归合并。

核心有了其他都是调用了，比如把mixin方法挂载到vue上可以直接调用：

Vue.mixin = function (mixin) {
  // 将属性合并到Vue.options上
  this.options = mergeOptions(this.options,mixin);
  return this;
}

初始化的时候先合并一次，生命周期也是，在状态初始化之前先调用beforeCreate，初始化之后调用created，源码搜索Vue.prototype._init这个方法里面就能看见，包括其他生命周期，可以搜索callhook去看看：

vm.$options = mergeOptions(vm.constructor.options,options);
callHook(vm,'beforeCreate');

// 初始化状态

initState(vm);
callHook(vm,'created');

callHook就是循环调用生命周期：

export function callHook(vm, hook) {
  const handlers = vm.$options[hook];
  if (handlers) {
    for (let i = 0; i < handlers.length; i++) {
      handlers[i].call(vm);
    }
  }
}

mixin方法核心就是合并实例的属性，watch、methods、data等，也可以新增一开始没有的属性，比如vuex的$store。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。