因为现在已经有了vue3.x版本，所以在之后的记录中会和版本有关的知识点会明确指出版本的区别，这里记录一下对mixin的使用，这里以下 的vue指的是使用版本是vue2.x
Mixins使用场景
在vue的开发中，因为vue是有生命周期的，那如果我们希望在不同vue文件的相同的生命周期中做相同的事情，如果直接在每个文件中都写相同的代码，肯定是可以实现的，但这个肯定不是最佳实践，在vue中是通过mixins实现的
使用mixins可以减少重复代码的出现,便于抽取公共函数
Mixins的应用
mixins公共文件
src/mixins/index.js
export const mixins={
components:{
},
created(){
//console.log() hook
},
data(){
},
computed:{
},
methods:{
}
}
我们可以在指定的钩子函数中写一些通用的方法，或者数据中设定通用的字段名称，但是需要注意设置的data中的值的作用阈是当前的vue文件，全局的值需要特殊的设定
mixins的导入与使用
在vue2.x的.vue文件中引入mixins文件
import {mixins} from "../../mixins/index"
{
......
mixins:[mixins],
data(){
}，
methods:{
}
}
mixins中的内容会分别插入对应的方法中,也就是mixins中 created中的方法会自动插入.vue文件的 created方法中，mixins中data中的数据也会自动插入.vue文件的data中,并且当混入对象和组件本身含有重复选项时，这些选项将以合适的策略进行“合并”
合并策略
mixins中的内容会分别插入对应vue文件中,也就是mixins中，那么如果存在同名的字段、方法如何合并？
- 数据对象data在内部会进行递归合并，并在发生冲突时以组件（vue文件）数据优先，也就是就近原则
- 同名钩子函数（生命周期函数）中的内容将合并进一个数组里，以便它们都能被调用。另外，mixins文件的钩子函数会在组件自身钩子函数之前被调用
- 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对，也即遵循就近原则
这个目前来看就是生命周期中的内容会合并成数组，全部执行，并且mixins文件内容先执行，其它的都是如果冲突，采用就近原则
mixins的全局设置
socket实例
export const mixins = {
created() {
this.initWebSocket();//进入该生命周期执行初始化socket
},
destroyed() {
this.websock.close(); //离开路由之后断开websocket连接
},
methods: {
initWebSocket() {
//初始化weosocket
this.websock = new WebSocket( window.wsURI);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen() {
//连接建立之后执行send方法发送数据
//建立
// let actions = { 'test': '12345' }
// this.websocketsend(JSON.stringify(actions))
},
websocketonerror(e) {
//连接建立失败重连
console.log("websocketonerror:try init websocket again");
this.initWebSocket();
},
websocketonmessage(e) {
//数据接收
console.log("websocketonmessage: valid result:");
const res = JSON.parse(e.data);
if (res.status== 200) {
this.$model.success({ title: "File upload compliance" });
} else if (res.status== 500) {
this.$model.error({
title: res.data.title,
content: res.data.detailMessage,
});
} else {
this.$model.error({ title: "Server error, please try later" });
}
this.uploadData = {
file: "",
comment: "",
ruleType: "",
};
this.refresh();
},
websocketsend(Data) {
//数据发送
// this.websock.send(Data)
},
websocketclose(e) {
//关闭
console.log("断开连接", e);
},
action(param) {
console.log("action");
const temp = JSON.parse(param);
const statusUrl = "/xxxxxx/" + temp.type;
this.$http.post(statusUrl).then((res) => {
if (res.status!= 200) {
//---------------------
}
this.refresh();
})
},
},
};
这是一个关于建立socket链接的抽象
Mixins的使用缺陷
正如之前介绍的，在Mixins的使用过程中，因为需要合并，那么就会遇到下列问题
虽然有合并策略可以避免部分问题，但是有些复杂问题并不好避免，因此在vue3.x已经不推荐使用该方式了
Vue3.x中的实现方式
因为使用Mixins的目的，是为了能够抽取公共的部分，减少代码的重复，而vue3.x的组合式Api（setup）可以直接引入公共文件，因此也就不需要Mixins了
|