前言
最近一直在阅读Vue
的源码,发现了几个实战中用得上的小技巧,下面跟大家分享一下。
同时也可以阅读我之前写的Vue
文章
- vue开发中的"骚操作"
- 挖掘隐藏在源码中的Vue技巧!
- 抽丝剥茧般的阅读源码,将$nextTick()拉下神坛!
隐藏在源码中的技巧
在实例化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