最近一直在阅读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。自定义合并选项的策略函数,这非常实用。
在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._c
vm.$createElement
这两个方法实际上是对内函数createElement
的包装。
render: function (createElement) { return createElement('h2', 'title')}
总所周知,渲染函数的第一个参数就是createElement
函数,该函数用来创建虚拟节点,通过上面的了解,你也可以这样写
render: function () { return this.$createElement('h2', 'title')}
上面这两段代码是完全等价的。
最后来瞧瞧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
手机扫一扫
移动阅读更方便
你可能感兴趣的文章