前言
最近一直在阅读Vue的源码，发现了几个实战中用得上的小技巧，下面跟大家分享一下。
同时也可以阅读我之前写的Vue文章
隐藏在源码中的技巧
在实例化Vue时，首先调用的是Vue.prototype._init方法，而在此方法中mergeOptions()方法返回的options将运用在所有的初始化函数中。也就是如下代码：
vm.$options = mergeOptions( resolveConstructorOptions(vm.coustructor), options || {}, vm)
其中mergeOptions方法在core/util/options.js文件中，最后这个方法返回的是一个options对象。
return options
这就说明了mergeOptions方法最终将合并处理后的选项返回，并以该返回值作为vm.$options的值。
自定义选项的合并方法
如果我们在options中添加自定义的属性会怎么样？来自官方的例子：
new Vue({ customOption: 'foo', created: function () { console.log(this.$options.customOption) // => 'foo' } })
在创建Vue实例的时候传递了一个自定义选项：customOptions，在created中可以通过this.$options.customOption进行访问。原理其实就是使用mergeOptions函数对自定义选项进行合并处理。对于自定义选项的合并，采用的是默认的合并策略：
// 当一个选项没有对应的策略函数时，使用默认策略 const strat = strats[key] || defaultStrat
defaultStrat函数就定义在options.js文件内，源码如下
/** * Default strategy. */ const defaultStrat = function (parentVal: any, childVal: any): any { return childVal === undefined ? parentVal : childVal}
defaultStart作用如其名，它是一个默认的合并策略：只要子选项不是undefined则使用子选项，否则使用父选项。最终的效果就是你初始化了什么，得到的就是什么。
而且Vue也提供了一个全局配置叫Vue.config.optionMergeStrategies，这个对象就是选项合并中的策略对象，所以可以通过它指定某一个选项的合并策略，常用于指定自定义选项的合并策略，比如可以给customOption选项指定一个合并策略，只需要在config.optionMergeStrategies上添加与选项同名的策略函数即可：
Vue.config.optionMergeStrategies.customOption = function (parentVal, childVal) { return parentVal ? (parentVal + childVal) : childVal }
自定义customOption的合并策略是：如果没有parentVal则直接返回childVal，否则返回两者的和。
比如下面例子：
// 创建子类 const Sub = Vue.extend({ customOption: 1}) // 以子类创建实例 const vm = new Sub({ customOption: 2, created () { console.log(this.$options.customOption) // 3 } })
结果是在created方法中打印数字3。自定义合并选项的策略函数，这非常实用。
vm.$createElement
在initRender中，定义了vm.$createElement()方法，initRender在core/instance/render.js文件。在该函数中有以下一段代码：
// bind the createElement fn to this instance // so that we get proper render context inside it. // args order: tag, data, children, normalizationType, alwaysNormalize // internal version is used by render functions compiled from templates vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // normalization is always applied for the public version, used in // user-written render functions. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
这段代码在Vue实例对象上添加了两个方法：
vm._cvm.$createElement
这两个方法实际上是对内函数createElement的包装。
render: function (createElement) { return createElement('h2', 'title')}
总所周知，渲染函数的第一个参数就是createElement函数，该函数用来创建虚拟节点，通过上面的了解，你也可以这样写
render: function () { return this.$createElement('h2', 'title')}
上面这两段代码是完全等价的。
provide & inject
最后来瞧瞧provide和inject的原理。
如果一个组件使用了provide选项，那么该选项指定的数据将会被注入到该组件的所有子组件中，在子组件中可以使用inject选项选择性注入，这样子组件就拿到了父组件提供的数据。
provide和inject都是在Vue.prototype._init方法中完成初始化工作的：
initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) initState(vm) initProvide(vm) callHook(vm, 'created')
可以发现initInjections函数在initProvide函数之前被调用，这说明对于任何一个组件来说，总是要优先初始化inject选项，再初始化provide选项的。
先来看看initInjections函数，它定义在src/core/instance/inject.js文件中
export function initInjections (vm: Component) { const result = resolveInject(vm.$options.inject, vm) if (result) { // 省略... } }
该函数接收组件实例对象作为参数，在函数内部首先定义了result常量，接下来要判断result为真才执行if语句内的代码。
result常量的值是resolveInject函数的返回值。
export function resolveInject (inject: any, vm: Component): ?Object { if (inject) { // 省略... return result }}
可以看到，resolveInject函数接收两个参数，分别是inject选项以及组件实例对象。如果inject为真，那么将执行if语句块内的代码，最后返回result，否则返回undefined。
if语句块内的代码：
const result = Object.create(null) const keys = hasSymbol ? Reflect.ownKeys(inject).filter(key => { /* istanbul ignore next */ return Object.getOwnPropertyDescriptor(inject, key).enumerable }) : Object.keys(inject)
首先通过Object.create(null)创建一个空对象并赋值给result。接着定义keys常量，保存inject选项对象的每一个键名。
首先对hasSymbol进行判断，如果为真，则使用Reflect.ownKeys获取inject对象中所有可枚举的键名，否则使用Object.keys。
使用Reflect.ownKeys的好处是可以支持Symbol类型作为键名。
接下来使用for循环遍历刚刚获取的keys数组
for (let i = 0; i < keys.length; i++) { const key = keys[i]; const provideKey = inject[key].from let source = vm while (source) { if (source._provided && hasOwn(source._provided, provideKey)) { result[key] = source._provided[provideKey] break } source = source.$parent } }
provideKey常量保存的是每一个inject选项所定义的注入对象的from属性的值。
「题外话：」
在规范化阶段中，inject选项会被规范为一个对象，并且对象必然含有from属性。
inject: ['data1', 'data2']
那么被规范化后vm.$options.inject选项将变为：
{ 'data1': { from: 'data1' }, 'data2': { from: 'data2' } }
接着while循环，内部有一个if条件判断，检测source._provided属性是否存在，并且source._provided对象自身是否拥有provideKey键，如果有，则说明找到了注入的数据：source._provided[provideKey]，并将其赋值给result对象的同名属性。
如果if为假，则执行source = source.$parent； 重新赋值source变量，使其引用父组件，以及类推就完成了向父代组件查找数据的需求，直到找到数据为止。
如果找不到数据：
if (!source) { if ('default' in inject[key]) { const provideDefault = inject[key].default result[key] = typeof provideDefault === 'function' ? provideDefault.call(vm) : provideDefault } else if (process.env.NODE_ENV !== 'production') { warn(`Injection "${key}" not found`, vm) } }
查看inject[key]对象中是否定义了default选项，如果定义了default选项则使用default选项提供的数据作为注入数据，否则在非生产环境下会提示开发者。
最后如果查找到数据，则将result返回。但是result常量的值可能是不存在的，所以需要进行一个result的判断。为真时，说明成功取得注入的数据，此时执行if语句块的内容。
toggleObserving(false) Object.keys(result).forEach(key => { /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { defineReactive(vm, key, result[key], () => { warn(`Avoid mutating an injected value directly since the changes will be ` + `overwritten whenever the provided component re-renders. ` + `injection being mutated: "${key}"`, vm ) }) }else { defineReactive(vm, key, result[key]) } })toggleObserving(true)
通过遍历result常量并调用defineReactive函数在当前组件实例对象vm上定义与注入名称相同的变量，并赋予取得的值。
在使用defineReactive之前，调用了toggleObsesrving(false)函数关闭响应式定义的开关，之后又将开关开启，这会导致使用defineReactive定义属性时不会将该属性的值转换为响应式。
provide做的事很简单，先看看initProvide的内容：
export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { vm._provided = typeof provide === 'function' ? provide.call(vm) : provide } }
同样是接收组件实例对象作为参数。定义provide，是vm.$options.provide选项的引用，接着是if判断语句，只有在provide选项存在时才执行。
procide可以是对象，也可以是函数，所以使用typeof检测类型，如果是函数则执行该函数获取数据，否则直接将provide本身作为数据。最后将数据赋值给组件实例对象的vm._provided属性。也就是前面说的inject内，注入的数据就是从父组件实例的vm._provided属性中获取的。
「最后提示：」provide和inject主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
作者： zhangwinwin
链接：这几个小技巧，让你书写不一样的Vue！
来源：github