[vue2.x]MIXINS的使用

本文主要是介绍[vue2.x]MIXINS的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因为现在已经有了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() {//初始化weosocketthis.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了

这篇关于[vue2.x]MIXINS的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---