mergeOptions

normalizeProps
normalizeInject
normalizeDirectives

将2个配置选项合并到一个新的对象中

function mergeOptions ( parent, child,vm) {// 校验组件名是否符合规范，不能与 标签名和svg 名称重名if (process.env.NODE_ENV !== 'production') {checkComponents(child)}// 合并的 child 是一个子类构造函数时，就取出它的optionsif (typeof child === 'function') {child = child.options}// 格式化 props、inject、directivenormalizeProps(child, vm)normalizeInject(child, vm)normalizeDirectives(child)// 如果 child 有 extends 和 mixins 配置则合并它们// 合并过配置的child 上会有 _base属性，所以无需再次合并if (!child._base) {if (child.extends) {parent = mergeOptions(parent, child.extends, vm)}if (child.mixins) {for (let i = 0, l = child.mixins.length; i < l; i++) {parent = mergeOptions(parent, child.mixins[i], vm)}}}// 开始合并配置.下文有链接专门介绍合并过程const options = {}let keyfor (key in parent) {mergeField(key)}for (key in child) {if (!hasOwn(parent, key)) {mergeField(key)}}function mergeField (key) {const strat = strats[key] || defaultStratoptions[key] = strat(parent[key], child[key], vm, key)}return options
}

normalizeProps

格式化 props 的格式

function normalizeProps (options, vm) {const props = options.props// 没有配置 props 时直接跳出if (!props) return// 设置一个新的对象来保存格式化后的propsconst res = {}let i, val, name/**  如果提供的是 Array格式的 props,依次遍历把数据格式化成*  props: {key: {type: null}*  }*/if (Array.isArray(props)) {i = props.lengthwhile (i--) {val = props[i]if (typeof val === 'string') {name = camelize(val)res[name] = { type: null }}}} else if (isPlainObject(props)) {/**  如果提供的是Object 类型，处理结果与Array类似*  props: {key: {type: Type}}*/ for (const key in props) {val = props[key]name = camelize(key)res[name] = isPlainObject(val)? val: { type: val }}} options.props = res
}

normalizeInject

格式化传入的 inject 数据

function normalizeInject (options, vm) {// 没有inject就退出const inject = options.injectif (!inject) returnconst normalized = options.inject = {}// 传入的inject 是Array的情况下，把数据格式化成 /*{key: { from: inject[key] }}*/if (Array.isArray(inject)) {for (let i = 0; i < inject.length; i++) {normalized[inject[i]] = { from: inject[i] }}} else if (isPlainObject(inject)) {// inject 是Object类型的时候，依次遍历属性// 1. 值为Object格式，则合并对象中所有属性到一个新的对象中// 2. 值为 String, 则格式化为 { from: val }for (const key in inject) {const val = inject[key]normalized[key] = isPlainObject(val)? extend({ from: key }, val): { from: val }}}
}

normalizeDirectives

格式化自定义指令

function normalizeDirectives (options: Object) {const dirs = options.directivesif (dirs) {// 传入的指令格式为Object,把每个指令都遍历出来,只处理传入了单一函数的指令 /*directives: {"v-demo": function(){...}}*/for (const key in dirs) {const def = dirs[key]// 这里只是检查一下传入的指令是否只有一个函数// 如果是的，那么就把bind和update同时指向这个函数// 否则就无需格式化if (typeof def === 'function') {dirs[key] = { bind: def, update: def }}}}
}

经过上面一系列格式化之后,开始合并配置 mergeField

mergeOptions相关推荐

Vue的mergeOptions函数分析-下
上篇文章分析了mergeOptions函数的主要逻辑,最后知道是分别遍历俩个选项对象都去执行mergeField函数,其中mergeField函数其实是根据不同的key值来获取到相应的合并策略,从而执 ...
柯理化、mergeOptions、new的实现原理、reduce、flat
1. 什么是反柯理化,怎么实现反柯里化,是一个泛型化的过程.它使得被反柯里化的函数,可以接收更多参数. Function.prototype.unCurrying = function(){var ...
人人都会Vue，你的优势在哪里？
Vue,React这样的框架可以说是现在前端的必备技能,一个刚入门两三个月的前端都是要会Vue的. 但是大家有没有想过一个问题?Vue,React这样的框架已经是基本功,我们凭什么敢说比别人厉害呢? ...
new Vue 发生了什么
从入口代码开始分析,我们先来分析 new Vue 背后发生了哪些事情.我们都知道,new 关键字在 Javascript 语言中代表实例化是一个对象,而 Vue 实际上是一个类,类在 Javascri ...
Vue源码探究-全局API
Vue源码探究-全局API 本篇代码位于vue/src/core/global-api/ Vue暴露了一些全局API来强化功能开发,API的使用示例官网上都有说明,无需多言.这里主要来看一下全局API ...
new vue 方法参数_vue源码解析 lt;1gt; 数据驱动
intro Vue.js 一个核心思想是数据驱动.所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据. 本文将介绍vue如何将模板和数据渲染成最终的 D ...
vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
tapable源码分析
webpack 事件处理机制Tapable webpack 的诸多核心模块都是tapable的子类, tapable提供了一套完整事件订阅和发布的机制,让webpack的执行的流程交给了订阅的插件去处 ...
vue 生命周期_Vue 生命周期
生命周期图: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模版.挂载 Dom -> 渲染.更新 -> 渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. up ...

mergeOptions

mergeOptions

normalizeProps

normalizeInject

normalizeDirectives

mergeOptions相关推荐

最新文章

热门文章