Vue 的自定义选项合并策略，我觉得你一定需要

最新推荐文章于 2023-03-27 08:05:01 发布

淘淘是只狗

最新推荐文章于 2023-03-27 08:05:01 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript html 合并策略

本文链接：https://blog.csdn.net/qq_43477721/article/details/120840637

版权

vue 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

在这里插入图片描述

optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { 
    // 返回合并后的值 
}

Vue.config.optionMergeStrategies 是个什么东西?

在这里插入图片描述

是Vue实例的所有方法

是不是可以在上面添加一些自己的方法呢

你真是个小机灵鬼（戚薇表情包）_戚薇_机灵鬼_真是表情

// 接收一下optionMergeStrategies
const myOptionMergeStrategies = Vue.config.optionMergeStrategies
// 使用created这个生命周期函数作为我要合并的对象，并定义了一个 notInCurrentWindow 方法
myOptionMergeStrategies.notInCurrentWindow = myOptionMergeStrategies.created

// 自定义一个方法
const fn = (name, vm) => {
    const lifeCycles = vm.$options[name]
    if (lifeCycles && lifeCycles.length) {
        lifeCycles.forEach(lc => lc.call(vm));
    }

    // 子组件同样可以使用当前的自定义选项合并
    const children = vm.$children
    if (children && children.length) {
        children.forEach(child => fn(name, child))
    }
}

const bind = vm => {
    // 监听一下window窗口的进入和离开事件
    window.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
            fn('notInCurrentWindow', vm)
        }
    })
}

const vm = new Vue({
    el: document.querySelector('#root'),
    template: `
        <h1>hello world !</h1>
    `,
    notInCurrentWindow() {
        // todo
        alert('notInCurrentWindow 离开当前页面')
    },
    created() {
        // todo
        alert('created 离开当前页面')
    },
})

// 把自定义选项合并注入到Vue实例
bind(vm)

在这里插入图片描述

自定义合并策略本质就是继承了Vue内置的这些api的同时，扩展了自定义的用法。

那这个时候就要想，既然说合并，那万一自定义的与本来的发生冲突了， Vue 是怎么处理的，让我们来扒一扒源码吧。

optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略。

默认的合并策略(defaultStrat)

var defaultStrat = function (parentVal, childVal) {
  return childVal === undefined
    ? parentVal
    : childVal
}

defaultStrat 函数，传入两个参数 parentVal, childVal 分别对应于父组件和子组件的选项，如果子组件的选项不存在，才会使用父组件的选项，如果子组件的选项存在，使用子组件自身的。

options.el options.propsData

 // config 是一个全局对象，对应于Vue.config
 // config.optionMergeStrategies 初始化时是一个空对象
 // config.optionMergeStrategies = Object.create(null)
var strats = config.optionMergeStrategies 

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 // 设置每一个钩子函数的合并策略
})

这么多三元判断表达式，其实就是为了确保将多个相同的生命周期钩子合并为一个数组。

function mergeHook(parentVal, childVal, vm, key) {
    // 如果子元素没有值，那么直接返回父元素
    if (!childVal) {
        return parentVal;
    }

    if (parentVal) {
        return parentVal.concat(childVal);
    }
    else {
        if (Array.isArray(childVal)) {
            return childVal;
        }
        else {
            return [childVal];
        }
    }
}

如果有多个生命周期钩子，则直接合并成数组并返回。s

如果父组件和子组件都设置了钩子函数选项，那么它们会合并到一个数组里，而且父组件的钩子函数会先执行，最后返回一个合并后的数组。

options.components options.directives options.filters

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
    }
    // 这里返回的应该是一个函数，函数返回结果是合并后的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 的函数，然后再合并函数返回的对象。

总结：

普通的js原始值（string，number，boolean等）直接后者覆盖前者即可。
对象的合并，如果合并双方都是对象，则使用递归的方式将其合并（数组好像是直接覆盖，并没有进行特殊合并）
对于函数，如果需要他们合并后都可以执行，则可以考虑将函数合并成数组，然后你可以将其包装成一个新函数，依次调用合并后数组中的函数。
如果合并的是一些特殊对象，不能递归合并，那么根据情况，你还可以使用原型链的方式进行合并。

啊，好多啊，没事，慢慢学就行啦

参考文章：

https://segmentfault.com/a/1190000007087912

https://juejin.cn/post/6996677265715101704

https://blog.csdn.net/qq_33024515/article/details/87857999

淘淘是只狗

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue 的自定义选项合并策略，我觉得你一定需要

optionMergeStrategies 主要用于 mixin 以及 Vue.extend() 方法时对于子组件和父组件如果有相同的属性(option)时的合并策略自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后.
复制链接

扫一扫