Vue | 20 可复用性&组合-混入

本文深入探讨Vue中的混入(mixins)概念,介绍其基本使用、操作项的合并策略、全局混入的注意事项及自定义合并策略。混入是Vue中实现组件功能复用的有效手段,了解其工作原理有助于提升开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

内容提要:

  1. 基础的混入方式
  2. 操作项的合并
  3. 全局的混入方式
  4. 自定义操作项合并策略

混入是一种非常灵活的分发Vue组件中可复用的功能模块的方式。一个混入对象能包含任何组件操作项。当一个组件使用一个混入对象的时候,在混入对象的所有操作项被‘混合’进组件自己的操作项。

例如:

// 定义一个混入对象
var myMixin = {
    created: function () {
        this.hello()
    },
    methods: {
        hello: function () {
            console.ljog('hello form mixin!')
        }
    }
}

// 定义一个组件使用这个混入
var Component = Vue.extend({
    mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

操作项合并

当一个混入和组件本身包含重叠的操作项,它们将被使用恰当的策略合并。

例如,数据对象进行一个浅合并(一层属性深度),在发生冲突时组件的数据优先。

var mixin = {
	data: function () {
        return {
			message: 'hello',
			foo: 'abc'
		}
	}
}

new Vue({
    mixins: [mixin],
    data: function () {
        return {
			message: 'goodbye',
            bar: 'def'
        }
	},
    created: function () {
        console.log(this.$data)
        // => { message: "goodbye, foo: "abc", bar: "def" }
    }
})

相同命名的钩子函数被合并到数组以便调用所有这些函数。在组件自己的钩子被调用之前混入钩子将被调用。

var mixin = {
	created: function () {
		console.log('mixin hook called')
    }
}

new Vue({
    mixins: [mixin],
    created: function () {
		console.log('component hook called')
    }
})

// => "mixin hook called"
// => 'component hook called'

值为对象的选项,例如:methodscomponentsdirecitives,将被合并到同一个对象。在这些对象中,当keys冲突的时候组件选项具有更高的优先级:

var mixin = {
	methods:{
    foo: function () {
        console.log('foo')
    },
    conflicting: function () {
		console.log ('from mixin')
    }
  }
}

var vm = new Vue({
    minins: [mixin],
    methods: {
		bar: function () {
			console.log('bar')
        },
        conflicting: function () {
			console.log('from self')
        }
    }
})

vm.foo() // => "foo"
vm.bar() // => "bar" 
vm.conflicting() // => "form self"

Vue.extend()使用相同的合并策略。

全局混入

你也能够使用一个全局混入,谨慎使用!一旦你使用了一个全局混入,它将影响你之前创建的每一个Vue实例。当使用得当的时候,它可以被用于注入自定义操作的处理逻辑:

// 为‘myOption’自定义操作输入一个处理程序
Vue.mixin({
    created: function () {
        var myOption = this.$options.myOption
        if (myOption) {
            console.log(myOption)
        }
    }
})

new Vue({
    myOption: 'hello!'
})
// => hello!

要节制和小心使用全局混入,因为它会影响你每一个单独创建的Vue实例,包括第三方组件。大多数情况下,你应该像上文的例子一样仅仅在自定义的操作中使用。也可以作为Plugins以避免重复应用。

自定义操作项合并策略

当自定义操作项被合并的时候,他们使用默认的策略复写已经存在的值。如果你想让一个自定义的操作项使用一个自定义的逻辑被合并,你需要附加一个函数Vue.config.optionMergeStrategies:

Vue.config.optionMergeStrategies.myOption = function (toVal, formVal) {
    // 返回合并后的值
}

对于大部分基于对象的操作,你能够通过methods使用相同的策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = stategies.methods

一个更高级的合并策略例子能够被发现在 Vuex‘s 1.x:

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, formVal) {
    if (!toVal) return fromVal
    if (!formVal) return toVal
    return {
        getters: merge(toVal.getters, formVal.getters),
        state: merge(toVal,state, fromVal.state),
        actions: merge(toVal,actions, fromValue.actions)
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值