Vue应用——关于Mixin

豆包君
1,046 阅读6分钟

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

关于Mixin

闲时要有吃紧的心思，忙时要有悠闲的趣味

目录

前言

返回目录

  当我们的项目越来越大，可能会发现在相似的组件里一遍又一遍的在复制粘贴相同的代码段（data，method，watcher等）。当然，也可以把相似的组件写成一个组件，然后用props来定制它，但是使用太多的props很容易导致混乱。

  不过，我们还有一种解决方案，那就是Mixin（混入）。

正文

一、Mixin介绍

返回目录

Mixin是什么

  Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，Mixin对象能够使用组件的任何属性（data，mounted，created，update等），而且当组件使用Mixin时，这个Mixin的所有信息也会混合到这个组件里，这个组件就能够访问到所有Mixin的属性就像声明在自己对象中一样。

使用场景

  在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立。

  这时，可以通过Vue的mixin功能将相同或者相似的代码提出来。如一些逻辑相同弹框，将其是否展示的逻辑抽离出来。或者当我们需要全局去注入一些methods, filter或者hooks时我们就可以使用mixin来做。

  1. 比如我们希望每一个Vue实例都有一个print方法，我们就可以这么做：
    Vue.mixin({
        methods: {
            print() {
                console.log(`我是一个通过mixin注入的方法！`)
            }
        }
    })
  1. 或者我们想要去监听在什么阶段时什么组件被加载了，被卸载了等等，我们可以这么做：
    Vue.mixin({
        mounted() {
            console.log(`${this.$route.name} component mounted!`)
        },
        destroyed() {
            console.log(`${this.$route.name} component destroyed!`)
        }
    })

  如果我们并不想给每一个组件实例都混入这些配置options，而只是个别的组件，最好不要使用mixin，它可能会影响到我们组件的性能。

二、Mixin 和 mixins 的区别

返回目录

mixin

  Mixin 接收的是对象。

  Mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑

mixins

  mixins 接收的是一个 Mixin 对象的数组。

  组件中单独混入，即局部混入。是我们最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过 mixins 混入代码。

三、Mixin的用法

返回目录

  1. 定义一个Mixin.js文件，声明Mixin对象，有组件options的data、methods属性
const myMixin = {
    created: function() {
        this.hello()
    },
    methods: {
        hello: function() {
            console.log('hello from mixin!')
        }
    }
}
export default myMixin
  1. 引入并使用 Mixin

局部混入

  在所需组件引入并通过 mixins 使用。该组件在使用的时候，混合了mixin里面的方法，在自动执行create生命钩子，执行hello方法

// 引入mixin
import myMixin from '@/mixin/mixin.js';

export default defineComponent({
    // 局部混入,使用mixin
    mixins: [myMixin],
    name: 'MixinDemo',
});

全局混入

  在 main.js 文件中，通过 Vue.mixin() 进行全局的混入,

// 引入mixin
import myMixin from '@/mixin/mixin.js';
// 全局混入,使用mixin
Vue.mixin(myMixin)

  全局混入使用时应该格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

  PS：全局混入常用于插件的编写

四、Mixin特点

返回目录

  1. 方法和参数在各组件中不共享
  • 如混入对象中有一个 cont:1的变量, 在组件A中改变cont值为5，这时候在组件B中获取这个值，拿到的还是1，还是混入对象里的初始值，数据不共享
  1. 值为对象的选项
  • 如methods, components等，选项会被合并，键冲突的组件会覆盖混入对象的，比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法
  1. 值为函数的选项
  • 如created, mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用，同一个钩子函数里，会先执行混入对象的东西，再执行本组件的
  1. 与vuex的区别
  • vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
  • Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
  1. 与公共组件的区别
  • 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

总结

返回目录

  在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

  • Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性。

  • 可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。

  为了解决这些问题，Vue3添加了一种通过逻辑关注点组织代码的新方法：组合式 API。

  总之, mixin虽然方便, 不宜多用哦。

与诸君共勉，为自己加油！

参考文档

函数合并为一个 函数返回数据合并，优先级高的被应用

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议


db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

avatar
文章
阅读
粉丝