一、概念
Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类
Mixin类通常作为功能模块,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂
vue中的mixin
mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能
本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、methods、created、computed等等。
共用的功能以对象的方式传入 mixins选项中,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中。
-
局部混入
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log(‘hello from mixin!’)
}
}
}Vue.component(‘componentA’,{
mixins: [myMixin]
})
组件通过mixins属性调用mixin对象( 该组件在使用的时候,混合了mixin里面的方法,在自动执行created生命钩子,执行hello方法 )
-
全局混入 ( 全局混入常用于插件的编写 )
Vue.mixin({
created: function () {
console.log(“全局混入”)
}
})
通过Vue.mixin()
进行全局的混入
- 当组件存在与mixin对象相同的选项的时候,进行递归合并的时候组件的选项会覆盖mixin的选项。
- 但是如果相同选项为生命周期钩子的时候,会合并成一个数组,先执行mixin的钩子,再执行组件的钩子
二、源码分析 ( 编译器自动补入,递归合并 )
Vue.mixin:/src/core/global-api/mixin.js
主要是调用merOptions方法
options:/src/core/util/options.js
合并策略:
- 替换型策略有props、methods、inject、computed,就是将新的同名参数替代旧的参数
- 合并型策略是data, 通过set方法进行合并和重新赋值
- 队列型策略有生命周期函数和watch,原理是将函数存入数组,然后正序遍历依次执行
- 叠加型有component、directives、filters,通过原型链进行层层的叠加
先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦