Vue中mixins(混入)的介绍和使用

news/2024/10/30 21:29:45/

什么是Mixin?

想要使用一个事物或者工具,我们首要先了解它是什么,这样我们才好对症下药。

其实Mixin不是Vue专属的,可以说它是一种思想,也可以说它就是混入的意思,在很多开发框架中都实现了Mixin(混入),我们这里主要讲解的是Vue中的Mixin

老规矩,先看 官方文档

官方解释:

混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

官方的解释通常都是晦涩难懂的,因为要专业和准确嘛!

我们可以用我们自己容易理解的话来说说Vue中的Mixin是什么。

民间解释:

将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度,也可以让后期维护起来更加容易。

这里需要注意的是:提取的是逻辑或配置,而不是HTML代码和CSS代码。其实大家也可以换一种想法,mixin就是组件中的组件,Vue组件化让我们的代码复用性更高,那么组件与组件之间还有重复部分,我们使用Mixin再抽离一遍。

Mixin和Vuex的区别?

上面一点说Mixin就是一个抽离公共部分的作用。在Vue中,Vuex状态管理似乎也是做的这一件事,它也是将组件之间可能共享的数据抽离出来。两者看似一样,实则还是有细微的区别,区别如下:

Vuex公共状态管理,如果在一个组件中更改了Vuex中的某个数据,那么其它所有引用了Vuex中该数据的组件也会跟着变化。
Mixin中的数据和方法都是独立的,组件之间使用后是互相不影响的。

如何使用?

我们了解了Mixin的概念,那么如何使用它呢?这才是我们的重点。

准备工作

接下来我们的mixin就放在Vue2.x的脚手架项目中演示。

利用Vue-cli初始化一个最简单的项目:
找到你要创建项目的文件夹 例如 这个 Vue 文件夹
在这里插入图片描述
输入cmd指令 弹出命令行
在这里插入图片描述

命令: vue create 项目名称

在这里插入图片描述

这里会弹出提示 创建的是Vue3还是Vue2的项目,这里我用到的是Vue2 看自身条件自行参考
在这里插入图片描述
在这里插入图片描述

正在安装Vue项目
在这里插入图片描述
在你创建的文件夹下就可以找到你的项目了
在这里插入图片描述

输入 npm run serve 启动项目

在这里插入图片描述
在这里插入图片描述

mixin定义

定义mixin也非常简单,它就是一个对象而已,只不过这个对象里面可以包含Vue组件中的一些常见配置,如data、methods、created等等。

在我们的项目src目录下新建mixin文件夹,然后新建index.js文件,该文件存放我们的mixin代码。

代码如下:

// src/mixin/index.js
export const mixins = {data() {return {};},computed: {},created() {},mounted() {},methods: {},
};

在这里插入图片描述
可以看到我们的mixin非常的简单,主要包含了一个Vue组件的常见的逻辑结构。

接下来让我们在mixin中简单的写点东西,代码如下:

export const mixins = {data() {return {msg: "我是mixins",};},computed: {},created() {console.log("我是mixin中的created生命周期函数");},mounted() {console.log("我是mixin中的mounted生命周期函数");},methods: {clickMe() {console.log("我是mixin中的点击事件");},},
};

局部混入

我们的公共mixin定义好后,最重要就是如何使用它。根据不同的业务场景,我们可以分为两种:局部混入和全局混入。顾名思义,局部混入和组件的按需加载有点类似,就是需要用到mixin中的代码时,我们再在组件章引入它。全局混入的话,则代表我在项目的任何组件中都可以使用mixin。

组件中引入mixin也非常简单,我们稍微改造下App.vue组件。

代码如下:

<template><img alt="Vue logo" src="./assets/logo.png"><button @click="clickMe">点击我</button>
</template><script>
import { mixins } from "./mixin/index";
export default {name: 'App',mixins: [mixins],components: {},created(){console.log("组件调用minxi数据",this.msg);},mounted(){console.log("我是组件的mounted生命周期函数")}
}
</script>

效果如下:
在这里插入图片描述
上段代码中引入mixin的方法也非常简单,直接使用vue提供给我们的mixins属性:mixins:[mixins]

通过上面的代码和效果我们可以得出以下几点:

  1. mixin中的生命周期函数会和组件的生命周期函数一起合并执行。
  2. mixin中的data数据在组件中也可以使用。
  3. mixin中的方法在组件内部可以直接调用。
  4. 生命周期函数合并后执行顺序:先执行mixin中的,后执行组件的。

问题提出:

这里我们就提出了一个问题:一个组件中改动了mixin中的数据,另一个引用了mixin的组件会受影响吗?

答案是不会的!

我们可以尝试一下:

src下的components文件夹下新建Demo组件,代码如下:

<!--src/components/Demo.vue -->
<template><div>mixin中的数据:{{ msg }}</div>
</template>
<script>
import { mixins } from "../mixin/index";
export default {mixins: [mixins],
};
</script>

然后在App.vue组件中引入Demo组件,代码如下:

<template><img alt="Vue logo" src="./assets/logo.png"><button @click="changeMsg">更改mixin数据</button><Demo></Demo>
</template><script>import Demo from "./components/Demo.vue";
import { mixins } from "./mixin/index";
export default {name: 'App',mixins: [mixins],components: {Demo},created(){console.log("组件调用minxi数据",this.msg);},mounted(){console.log("我是组件的mounted生命周期函数")},methods:{changeMsg() {this.msg = "我是修改后是msg";console.log("更改后的msg:", this.msg);},}
}
</script>

代码解释:

  • 我们在Demo组件中引入了mixin,且使用了mixin中的msg数据。
  • App.vue中同样引入了mixin,且设置了点击事件更改msg
  • 点击按钮,更改msg,查看Demo组件中显示是否有变化。
    在这里插入图片描述

在组件命名的时候未按照 ESLint的官方代码规范进行命名可以关闭eslint校验
配置 vue.config.js 文件

在根目录下找到 vue.config.js 文件(如果没有则新建一个,按照示例中的代码进行添加;用 vue-cli 脚手架进行创建的项目都会有 vue.config.js 文件),添加下面的代码在 vue.config.js 文件下,加入以下代码

// 关闭eslint校验
lintOnSave: false

在这里插入图片描述

全局混入

上一点我们使用mixin是在需要的组件中引入它,我们也可以在全局先把它注册好,这样我们就可以在任何组件中直接使用了。

修改main.js,代码如下:

import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin/index";
Vue.mixin(mixins);Vue.config.productionTip = false;new Vue({render: (h) => h(App),
}).$mount("#app");

然后把App.vue中引入mixin的代码注释掉,代码如下:

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><button @click="clickMe">点击我</button><button @click="changeMsg">更改mixin数据</button><Demo></Demo></div>
</template><script>
// import { mixins } from "./mixin/index";
import Demo from "./components/Demo.vue";
export default {name: "App",// mixins: [mixins],components: { Demo },created() {console.log("组件调用minxi数据", this.msg);},mounted() {console.log("我是组件的mounted生命周期函数");},methods: {changeMsg() {this.msg = "我是修改后的msg";console.log("更改后的msg:", this.msg);},},
};
</script>

效果如下:

在这里插入图片描述
可以发现效果上和局部混入没有任何区别,这就是全局混入的特点。

虽然这样做很方便,但是我们不推荐,来看看官方的一段话:

请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。

选项合并

上面的列子中我们仔细看会发现一个问题:mixin中定义的属性或方法的名称与组件中定义的名称没有冲突!

那么我们不禁会想,如果命名有冲突了怎么办?

我们使用git合并代码的时候经常会有冲突,有冲突了不要怕,我们合并就好了。这里的冲突主要分为以下几种情况:

(1)生命周期函数

确切来说,这种不算冲突,因为生命周期函数的名称都是固定的,默认的合并策略如下:

先执行mixin中生命周期函数中的代码,然后在执行组件内部的代码,上面的例子其实就很好的证明了。
在这里插入图片描述

(2)data数据冲突

mixin中的data数据与组件中的data数据冲突时,组件中的data数据会覆盖mixin中数据,借用官方的一段代码:

var mixin = {data: function () {return {message: 'hello',foo: 'abc'}}
}new Vue({mixins: [mixin],data: function () {return {message: 'goodbye',bar: 'def'}},created: function () {console.log(this.$data)// => { message: "goodbye", foo: "abc", bar: "def" }}
})

可以看到最终打印的message是组件中message的值,其它没有冲突的数据自然合并了。
在这里插入图片描述

(3)方法冲突

这种冲突很容易遇到,毕竟大家命名方法的名字很容易一样,这里同样借用官方的一段代码:

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"

上段代码中mixin和组件中都有conficting方法,但是最终在组件中调用时,实际调用的是组件中的conflicting方法。

当然,如果你要自定义合并规则也不是不可以,但是我觉得没有必要,项目中无需做这么复杂。

mixin的优缺点

从上面的例子看来,使用mixin的好处多多,但是凡是都有两面性,这里总结几点优缺点供大家参考:

优点

  • 提高代码复用性
  • 无需传递状态
  • 维护方便,只需要修改一个地方即可

缺点

  • 命名冲突
  • 滥用的话后期很难维护
  • 不好追溯源,排查问题稍显麻烦
  • 不能轻易的重复代码

总结

mixin给我们提供了方便的同时也给我们带来了灾难,所以有很多时候不建议滥用它,但是在有些场景下使用它又是非常合适的,这就得根据自己来取舍了。所以在很多时候我们需要考虑用公共组件还是使用mixin


http://www.ppmy.cn/news/48088.html

相关文章

异常(throwable)

异常 异常分类 &#xff08;1&#xff09;Throwable类 所有的异常类型都是它的子类&#xff0c;它派生两个子类Error、Exception。 &#xff08;2&#xff09;Error类 表示仅靠程序本身无法恢复的严重错误&#xff08;内存溢出动态链接失败、虚拟机错误&#xff09;&#…

Seata强一致性事务模式XA的设计理念

承接上文分布式事务Seata-AT模式 XA规范是什么? 是分布式事务处理DTP&#xff08;Distributed Transaction Processing&#xff09;的标准。是描述全局的事务管理器和局部的资源管理器之间的接口规范。允许多个资源&#xff08;如数据库、应用服务、消息队列&#xff09;在同…

class与typename的异同

一、class与typename的相同点 typename关键字常用于函数模板&#xff0c;这里首先引入函数模板的概念&#xff1a;函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实参类型产生函数的特定 类型版本 //函数模板格式…

idea 配置docker 进行上传镜像,部署启动容器

前言 在我们开发测试过程中&#xff0c;需要频繁的更新docker镜像&#xff0c;然而默认情况下&#xff0c;docker的2375端口是关闭的&#xff0c;下面介绍如何打开端口。 修改docker配置文件 操作步骤&#xff1a; 1.1、修改配置 登录docker所在服务器&#xff0c;修改docker…

深入浅出剖析JAVA多线程原理

1. 线程基础知识 1.1 线程与进程 1.1.1 进程 ●程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至 CPU&#xff0c;数据加载至内存。在指令运行过程中还需要用到磁盘、网络等设备。进程就是用来加载指令、管理内存、管理…

聚观早报|马斯克将TruthGPT挑战ChatGPT;腾讯披露自研芯片新进展

今日要闻&#xff1a;马斯克将TruthGPT挑战ChatGPT&#xff1b;苹果在印度年销售额近60亿美元&#xff1b;腾讯披露自研芯片沧海最新进展&#xff1b;特斯拉中国工厂普通工人月薪约1万元&#xff1b;飞猪将直接向阿里CEO张勇汇报 马斯克将TruthGPT挑战ChatGPT 4 月 18 日消息&…

【大厂直通车】哔哩哔哩日常实习_测开面经

📑哈喽,大家好,我是小浪;本篇博客更新的是最新B站测开面经,本专栏非常适合目前准备找实习,或者准备冲秋招测试,测开方向的同学阅读订阅,持续更新各大厂真题面经,带你成为offer收割机!! 🧃对于订阅本专栏的同学们,博主在努力更新,只需要一杯奶茶钱,订阅本专栏,…

数据结构(三)—— 哈希表

文章目录 一、哈希表积累1.1 哈希map1.2 哈希set 二、哈希表基础三、题3.1 242 有效的字母异位词3.2 349 两个数组的交集3.3 202 快乐数3.4 1 两数之和3.5 54 四数相加II 一、哈希表积累 什么时候想到用哈希法&#xff1a;当要需要查询一个元素是否出现过、判断一个元素是否出…