Vue.js 深入学习 混入

混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。使用场景:

  • 使用混入可以减少代码量,实现代码重用。
  • 后期需要增加方法时,使用混入会减少源代码的污染。

全局混入和局部混入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//全局混入
Vue.mixin({
created: function () {
}
})
//局部混入
var mixin = {
created: function () {
}
}
var app = new Vue({
mixins: [mixin],
methods: {
}
})

当组件和混入对象含有同名选项时,以下面的方式混合:

  • 数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先。
  • 同名钩子函数将混合为一个数组,因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
  • 值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
  • Vue.extend() 也使用同样的策略进行合并。

一旦使用全局混入对象,将会影响到 所有 之后创建的 Vue 实例。