Deboy's Blog

vue-mixins使用注意事项和高级用法

因为在项目中 mixins(混合)特性使用频率是很高的 有必要熟练掌握
官方文档: mixins


实际项目中 一般都存在 列表(list) 这种很常见的使用场景

话再多都不如上demo

file: mixins/list.js

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
module.exports = {
data () {
return {
list: [],
page: 1,
limit: 15,
total: 0
}
},
created () {
this.initList()
},
watch: {
page: 'loadData'
},
methods: {
/**
* 获取请求参数 默认只传递index(页码) limit(每页条数) 可以由调用方传递指定对象合并(或者覆盖)原参数
* @param params
* @returns {*}
*/
getParams (params) {
return Object.assign({
index: this.page,
limit: this.limit
}, params)
},
/**
* 加载更多
*/
loadMore () {
this.page++
},
/**
* 推送到list中 因为vue的监听特性 只能用push进行数据的添加 如果有特殊处理 通过传递一个filter来过滤数据
* @param list
* @param filter
*/
pushToList (list, filter) {
list.forEach((item) => {
if (typeof filter === 'function') {
this.list.push(filter(item))
} else {
this.list.push(item)
}
})
},
/**
* 初始化列表
*/
initList () {
this.page = 1
this.list = []
this.loadData()
},
/**
* @overwrite
* 加载数据方法 用到该mixin的都应该重写该方法 否则无法实现加载数据
*/
loadData () {
// 每个列表自己的获取数据的方法需要重写
}
}
}

解析

一个列表的基本属性

属性 作用或备注
list 列表
page 页码
limit 每页条数
total 总条数

基本方法

方法 作用或备注
initList() 初始化列表
loadData() 加载数据
loadMore() 加载更多

扩展方法[主要用于参数的处理和结果的处理]

方法 作用或备注
getParams() 获取HTTP请求参数
pushToList() 数据处理方法

每一个列表结构都具备的属性以及方法 可以放到mixins的声明中

从这段代码中可以得知 加载了该mixins的组件会在创建之后执行一个initList方法
顾名思义 就是初始化列表的方法

1
2
3
created () {
this.initList()
}

问题

但是问题来了 如果我的组件 不只是在初始化的时候使用
而是在使用了keep-alive的应用下在route->data()的钩子中执行初始化呢?

1
2
3
4
5
route: {
data () {
this.initList()
}
}

这时候你打开控制台 刷新页面 就会发现 第一次进入 初始化了两次

原因

因为mixins的合并策略

当混合对象与组件包含同名选项时,这些选项将以适当的策略合并。例如,同名钩子函数被并入一个数组,因而都会被调用。另外,混合的钩子将在组件自己的钩子之前调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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"

值为对象的选项,如 methods, components 和 directives 将合并到同一个对象内。如果键冲突则组件的选项优先。

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
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"

注意 Vue.extend() 使用同样的合并策略。

所以即使你在引用的组件中 把created重写 也是被合并(两个都会执行) 因为合并的策略不同 导致了 methods 可以被重写 而created ready等只会被合并

解决方法

怎么解决?

读过阅读官方文档后我想你会有答案

我这里提供一个文档中提到的比较灵活的简单的方案 加一个自定义选项

1
2
3
4
5
6
created () {
let option = this.$options.doNotInit
if (!option) {
this.initList()
}
}

通过该选项 doNotInit 来判断是否需要在组件创建完毕之后就初始化

在调用该mixins的组件中 添加这么一个选项 就可以让组件不执行初始化方法

而是通过route->data()钩子来控制列表的初始化

调用

file: anyVueComponent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import List from 'path/mixins/list'
export default{
mixins: [List],
data () {
return {
// 除列表外额外的属性
}
},
methods: {
loadData () {
this.$http.post(yourApiUrl, this.getParams()).then((res) => {
// do somethings
})
}
},
doNotInit: true,
route: {
data () {
this.initList()
}
}
}

说到底 仔细阅读Vue文档 项目中遇到的绝大多数问题 都能迎刃而解~

Deboy wechat
精品文章推荐~
坚持原创技术分享,您的支持将鼓励我继续创作!