Vue.config.optionMergeStrategies 用法分析

举个例子，假设有个对象，他叫objA, 技能是说hello，他喜欢的女生叫小花，但是他是一个花心的人！

objA = {
name: 'objA ',
sayHello_ () {
console.log('hello')
},
love: '小花',
personality: '花心'
}
然后，又有一个对象，她叫objB, 技能是说world

objB = {
name: 'objB',
sayWorld () {
console.log('world')
}
}
然后现在想把objB 去 objA 家里玩！然后objA, 学会了objB的说world的技能，并且他爱上了objB，并且变得专一了。(而你就是定这个命运的人)

objA = {
name: 'objA',
sayHello_ () {
console.log('hello')
},
sayWorld () {
console.log('world')
},
love: 'objB',
personality: '专一'
}
同理，让我们用代码来看待这件事情！让objB 和 objA 合并，如果用到Vue实例上，就等同于我们写了这么一堆函数：(我们以【name, love, personality】举例吧！毕竟代码越少越好)

import Vue from 'vue'

Vue.config.optionMergeStrategies.name = function (from, self) {
return self.name ? self.name : from.name
}

Vue.config.optionMergeStrategies.love = function (from, self) {
return from.love ? from.love: self.love
}

Vue.config.optionMergeStrategies.personality = function (from, self) {
return self.personality === '花心' ? '专一' : '花心'
}

new Vue({
el: '#app',
...
})
组件A

export default {
mixins: [B],
name: 'objA',
love: '小花',
personality: '花心',
created (http://www.my516.com) {
console.log(this.$options.name)
console.log(this.$options.love)
console.log(this.$options.personality)
},
...
}
</script>
B.js

export default {
name: 'objB'
}
当然，vue自身所有的option都有自己的合并策略，有兴趣的同学可以去读一读它的源码！

---------------------

巴特西

Vue.config.optionMergeStrategies 用法分析

最新文章

热门文章