Vue mixins 简单介绍

在 vue 中,如果每个组件中都有一个公共的生命周期干同一样的事情,那么一定要在每个组件中都声明一样的代码么?
不,您可以使用 mixinsextends 来优雅的实现上述功能。

mixins

混入可以混入多个,以数组的形式引入。

1
2
3
4
5
6
var vue = new Vue({
name: 'app',
mixins: [m1, m2, m3, ...],
created() {},
...
})

extends

继承只能继承一个

1
2
3
4
5
6
var vue = new Vue({
name: 'app',
extends: extends,
created() {},
...
})

mixins 和 extends 混合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const extend = {
created () {
console.log('extends created')
}
}
const mixin1 = {
created () {
console.log('mixin1 created')
}
}
const mixin2 = {
created () {
console.log('mixin2 created')
}
}
export default {
extends: extend,
mixins: [mixin1, mixin2],
name: 'app',
created () {
console.log('created')
}
}

控制台会输出:

1
2
3
4
extends created
mixin1 created
mixin2 created
created

  • 结论: 优先调用mixins和extends继承的父类,extends触发的优先级更高,相对于是队列
  • push(extend, mixin1, minxin2, 本身的钩子函数)
  • 经过测试,watch的值继承规则一样。

继承 methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const extend = {
data () {
return {
name: 'extend name'
}
}
}
const mixin1 = {
data () {
return {
name: 'mixin1 name'
}
}
}
const mixin2 = {
data () {
return {
name: 'mixin2 name'
}
}
}
export default {
mixins: [mixin1, mixin2],
extends: extend,
name: 'app',
data () {
return {
name: 'name'
}
}
}

输出:

1
2
name
// 因为本组件中的data优先级最高

如果是:

1
2
3
4
5
export default {
mixins: [mixin1, mixin2],
extends: extend,
name: 'app',
}

则输出:

1
2
mixin2 name
// 因为 mixin2 在最后被加载,覆盖其他的name值

结论:

  • 子类再次声明,data中的变量都会被重写,以子类的为准。
  • 如果子类不声明,data中的变量将会最后继承的父类为准。
  • 经过测试,props中属性、methods中的方法和computed的值继承规则一样。

参考文档

作者:qfkobe
链接:https://juejin.im/post/5a38d222f265da4312810a76

咸鱼也要有梦想,万一实现了呢
0%