混入
混入
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } })
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
var mixin = { created: function () { console.log('混入对象的钩子被调用') } } new Vue({ mixins: [mixin], created: function () { console.log('组件钩子被调用') } }) // => "混入对象的钩子被调用" // => "组件钩子被调用"
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
var mixin = { methods: { foo: function () { console.log('foo') }, conflicting: function () { console.log('from mixin') } } } var vm = new Vue({ mixins: [mixin], methods: { bar: function () { console.log('bar') }, conflicting: function () { console.log('from self') } } }) vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"
注意：Vue.extend() 也使用同样的策略进行合并。
全局混入
// 为自定义的选项 'myOption' 注入一个处理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!"
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
在vue-cli的混入引入
单页面引入
例
在你项目的components新建一个mixins.js文件，里边内容如下
const myMixin = { data() { return { isNoData: false, isShowLoding: true } } } export default myMixin;
需要的页面注册这个Mixins
import MinXin from '@/components/MinXins/index.js' export default { mixins: [MinXin], }
全局注入
第一种方法：在你项目的components新建一个mixins.js文件，里边内容如下
const myMixin = { data() { return { isNoData: false, isShowLoding: true } } } export default myMixin;
Vue.mixin(MinXin);是Vue.mixin(MinXin);是Vue.mixin(MinXin);不是Vue.use(MinXin);我就在这上边吃了半天的亏，愣是不知道哪里错了。import MinXin from '@/components/MinXins/index.js'
Vue.mixin(MinXin);Vue.mixin({ data() { return { isNoData: false, isShowLoding: true, } } })
这样也注册到了每个vue实例中了
自定义选项合并策略
转自 https://segmentfault.com/a/1190000007087912
optionMergeStrategies
optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略。
vue源码
defaultStrat
var defaultStrat = function (parentVal, childVal) { return childVal === undefined ? parentVal : childVal }
传入两个参数 parentVal, childVal 分别对应于父组件和子组件的选项，合并的策略就是，子组件的选项不存在，才会使用父组件的选项，如果子组件的选项存在，使用子组件自身的。
options.el options.propsData
/** * Option overwriting strategies are functions that handle * how to merge a parent option value and a child option * value into the final value. * * config.optionMergeStrategies: Object.create(null) */ // config 是一个全局对象，对应于Vue.config // config.optionMergeStrategies 初始化时是一个空对象 // config.optionMergeStrategies = Object.create(null) var strats = config.optionMergeStrategies /** * Options with restrictions */ if ("development" !== 'production') { strats.el = strats.propsData = function (parent, child, vm, key) { // 如果 vm 不存在，报错： key属性用在vm实例上 if (!vm) { warn( "option \"" + key + "\" can only be used during instance " + 'creation with the `new` keyword.' ) } return defaultStrat(parent, child) } strats.name = function (parent, child, vm) { if (vm && child) { warn( 'options "name" can only be used as a component definition option, ' + 'not during instance creation.' ) } return defaultStrat(parent, child) } }
上面可以看出，el , propsData 和 name 的合并策略就是默认的合并策略，即以子组件的选项为主，子组件的选项不存在时，才使用父组件的。
options.hook
function mergeHook ( parentVal, childVal ) { return childVal ? parentVal // 如果 childVal存在 ? parentVal.concat(childVal) // 如果parentVal存在，直接合并 : Array.isArray(childVal) // 如果parentVal不存在 ? childVal // 如果chilidVal是数组，直接返回 : [childVal] // 包装成一个数组返回 : parentVal // 如果childVal 不存在 直接返回parentVal } // strats中添加属性，属性名为生命周期各个钩子 config._lifecycleHooks.forEach(function (hook) { strats[hook] = mergeHook // 设置每一个钩子函数的合并策略 })
如果父组件和子组件都设置了钩子函数选项，那么 它们会合并到一个数组里，而且父组件的钩子函数会先执行，最后返回一个合并后的数组。具体见源码里的注释。
options.components options.directives options.filters
/** * Assets // components,directives,filters * When a vm is present (instance creation), we need to do * a three-way merge between constructor options, instance * options and parent options. */ function mergeAssets (parentVal, childVal) { // parentVal: Object childVal: Object var res = Object.create(parentVal || null) // 原型委托 return childVal ? extend(res, childVal) : res } config._assetTypes.forEach(function (type) { strats[type + 's'] = mergeAssets })
对于 assets 也就是 components, directives, filters 合并的策略就是返回一个合并后的新对象，新对象的自有属性全部来自 childVal, 但是通过原型链委托在了 parentVal 上。
这里顺便提提在一个对象里查找属性的规则。举个例子，当查找一个属性时，如 obj[a] ,如果 obj 没有 a 这个属性，那么将会在 obj 对象的原型里找，如果还没有，在原型的原型上找，直到原型链的尽头，如果还没有找到，返回 undefined。
因此这里同样一个道理，在 res 对象里查找某个 component 或 directive , 首先会找 childVal里的，如果没有，才会沿着原型链向上，找 parentVal中对应的属性。事实上，和 defaultStrat 一个道理。
options.props options.methods options.computed
strats.props = strats.methods = strats.computed = function (parentVal, childVal) { // parentVal: Object childVal: Object if (!childVal) return parentVal if (!parentVal) return childVal var ret = Object.create(null) extend(ret, parentVal) extend(ret, childVal) // child的会覆盖parent的 return ret }
同样来看源码，函数解构同样返回一个新的 res 对象，同样适用了 extend 方法拓展了 res 对象。但是要注意的是，先拓展的是 parentVal 对象，然后再拓展 childVal对象，这就意味着当拓展 chilidVal 对象的时候，如果 childVal中有 parentVal 的同名属性时，将会直接覆盖掉。这里顺便贴一下 extend 方法的源码
/** * Mix properties into target object. */ function extend (to, _from) { for (var key in _from) { to[key] = _from[key] } return to }
options.watch
/** * Watchers. * * Watchers hashes should not overwrite one * another, so we merge them as arrays. * 不应该重写（覆盖）,应该保存在一个数组里 */ strats.watch = function (parentVal, childVal) { /* istanbul ignore if */ if (!childVal) return parentVal if (!parentVal) return childVal var ret = {} extend(ret, parentVal) // ret首先获得parentVal的全部属性 for (var key in childVal) { var parent = ret[key] // 子组件的某个watcher在父组件中的值 var child = childVal[key] if (parent && !Array.isArray(parent)) { parent = [parent] // 如果parent不是一个数组，将其包装成一个数组 } ret[key] = parent ? parent.concat(child) // parent在前，child在后 : [child] // 如果在父组件中不存在，以数组的形式存储子组件的watcher } return ret }
子组件和父组件的watchers不应该覆盖，而是应该把它们都合并在一个数组里。这里同样是父组件的在前，子组件的在后。
options.data
data 是个重头戏，也是整个合并策略中最复杂的，这是因为，在组件中data是以函数的形式存在的。
/* * */ strats.data = function ( parentVal, childVal, vm // 如果传入了vm，那么它表示的是组件的根实例 ) { if (!vm) { // 如果没传入 // in a Vue.extend merge, both should be functions if (!childVal) { return parentVal } if (typeof childVal !== 'function') { // 在组件中定义data 必须是一个函数 "development" !== 'production' && warn( 'The "data" option should be a function ' + 'that returns a per-instance value in component ' + 'definitions.', vm ) return parentVal // 报完错，返回parentVal的data } if (!parentVal) { return childVal // parentVal不存在，返回 childVal的data } // when parentVal & childVal are both present, // we need to return a function that returns the // merged result of both functions... no need to // check if parentVal is a function here because // it has to be a function to pass previous merges. // 这里返回的应该是一个函数，函数返回结果是合并后的data对象 return function mergedDataFn () { return mergeData( childVal.call(this), parentVal.call(this) ) } } else if (parentVal || childVal) { // 如果提供了vm实例 return function mergedInstanceDataFn () { // 同样返回一个函数 // instance merge var instanceData = typeof childVal === 'function' ? childVal.call(vm) : childVal var defaultData = typeof parentVal === 'function' ? parentVal.call(vm) : undefined // 如果parentVal不是函数，则抛弃。 if (instanceData) { return mergeData(instanceData, defaultData) } else { return defaultData } } } }
/** * Helper that recursively merges two data objects together. * 合并规则： * 1. 如果from中的某个属性to中有，保留to中的，什么都不做。 * 2. 如果to中没有，赋值。 * 3. 如果to中和from中的某个属性值都是对象，递归调用。 */ function mergeData (to, from) { var key, toVal, fromVal for (key in from) { toVal = to[key] fromVal = from[key] if (!hasOwn(to, key)) { set(to, key, fromVal) // 设置to[key] = fromVal } else if (isObject(toVal) && isObject(fromVal)) { mergeData(toVal, fromVal) // 如果对应的值都是对象，则递归合并。 } } return to }
代码中注释都写得很清楚了，这里就不多说了。 Vue 中对于 data 属性的合并就是执行 parentVal 和 childVal 的函数，然后再合并函数返回的对象。
自定义合并策略
以上所说的都是 Vue 自定义的合并的策略，当然你也可以自定义某个选项的合并策略。
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}
比如想要修改 watch的合并策略
Vue.config.optionMergeStrategies.watch = function (toVal, fromVal) {
// return mergedVal
}
至于传入的函数参数，可以参考之前讲解的源码。
个人
浙公网安备 33010602011771号