美文网首页
Vue 选项合并规则

Vue 选项合并规则

作者: 茂茂爱吃鱼 | 来源:发表于2018-11-27 16:00 被阅读0次
  • dataprovide 等选项使用 mergeDataOrFn
  • 生命周期钩子watch 合并为 数组,使得父子选项中的钩子函数都能够被执行
  • directivesfilterscomponents 等资源选项,父子选项将以原型链的形式被处理,这样才能够在任何地方都是用内置组件、指令等
  • propsmethodsinjectcomputed 等选项,父选项始终可用,但是子选项会覆盖同名的父选项字段
  • 以上没有提到的选项都使用默认 defaultStrat,该选项策略是:只要子选项不是 undefined 就是用子选项,否则使用父选项

附上 mergeDataOrFn 的实现:

export function mergeDataOrFn (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // 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.
    return function mergedDataFn () {
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

相关文章

  • Vue 选项合并规则

    data、provide 等选项使用 mergeDataOrFn 生命周期钩子 及 watch 合并为 数组,使得...

  • 2018-08-17--Vue技术内幕摘记4

    Vue选项的合并策略 1.选项 el、propsData 的合并策略 说明:el选项或者propsData选项只能...

  • 深入剖析Vue源码 - 选项合并(下)

    上一节深入剖析Vue源码 - 选项合并(上)的末尾,我们介绍了Vue中处理合并选项的思路,概括起来主要有两点,一是...

  • 2018-08-20--Vue技术内幕摘记5

    Vue初始化开篇 1.用于初始化的最终选项 $options 1)自定义选项以及自定义选项合并策略 我们发现el确...

  • Vue源码解析: 丰富的选项合并策略

    简介 在Vue的初始化过程中,最开始的阶段就是选项合并阶段。它通过调用mergeOptions函数将两个选项配置合...

  • 温故而知新之VUE(五)

    混入 混入mixins是一种分发vue组件中可复用功能的非常灵活的方式 #选项合并当组件和混入对象有同名选项时,会...

  • VueJS学习之旅 08

    下面我就来看看VueJS中主要的组件选项,以及它们在Vue实例对象初始化过程中是如何完成属性合并的。 选项opti...

  • Vue源码解析三——选项合并

    上一章Vue源码解析二——从一个小例子开始逐步分析看完规范化选项之后,再来看看合并阶段是如何处理的,接下来是mer...

  • vue mixin

    合并选项当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行合并 数据对象在内部会进行递归合并,在发生冲突时...

  • Excel小技巧:Excel中合并单元格如何填充序号?

    Excel合并单元格分为规则合并和不规则合并。 Excel中规则合并单元格快速填充序号 如下图所示,如果合并单元格...

网友评论

      本文标题:Vue 选项合并规则

      本文链接:https://www.haomeiwen.com/subject/ziggqqtx.html