vue中mixin的用法详解

奶茶不加糖
1,596 阅读3分钟

哈喽，大家好！我是奶茶不加糖。一个喜欢喝奶茶的前端攻城狮
( 哈哈，放一张新老公的照片(*￣︶￣) )

前言

许多人应该都用过Vue，但是可能很多人不知道mixin这个东西的存在，也许知道但是不怎么使用，在此我说下我对mixin的一点理解

mixin的使用场景

其实如果使用过sass中的@mixin应该就会有种熟悉感，对于sass的@mixin当然是为了某些样式的重复使用，而vue中提供了一种混合机制--mixins是用来更高效的实现组件内容的复用

在项目中有两个相似的组件，它们之间逻辑大致相同，但是还是存在差异，这个时候我们有两个选择，一个就是把它们分开当作两个组件互不干扰来维护，但是这样如果逻辑发生了变化，就要两个里面都需要改变，这样肯定就不利于维护，第二个就是把他们合并成同一个组件，然后用props来传值的方式创造差异性来区分，但是这样太多的props传值很快就变得混乱不堪，在使用组件的时候必须理解一大段的上下文，使得使用效率变差。

这个时候使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次。

mixin的简单用法

1.定义一个 js 文件(mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2.在vue文件中使用mixin

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

Vue组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

合并

在上面的用法介绍大家可能知道mixin的方法混入到了引入者的里面，如果我想要mixin的方法，那么我就会引入mixinjs，但是如果某个方法我们稍微有些许差异的话，我们应该怎么做呢？

 //mixin
const hi = {
  methods: {
    sayHello: function() {
      console.log('hello from mixin!')
    },
     sayNo: function() {
       console.log('hello from mixin!')          }        },
  mounted() {
    this.sayHello()
  }
}

//vue instance or component
new Vue({
  el: '#app',
  mixins: [hi],
  methods: {
    sayHello: function() {
      console.log('hello from Vue instance!')
    }
  },
  mounted() {
    this.sayHello()
  }
})

// Output in console
> hello from Vue instance!
> hello from Vue instance!

可以看到上面的例子，我想要用mixinjs里面的sayNo的方法，但是sayHello我们有些差异，那这样时候，我们自己在组件里面写了sayHello方法其实就可以了

你可能已经注意到这有两个console.log而不是一个——这是因为第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayHello()函数。

结论

Mixin对于封装一小段想要复用的代码来讲是有用的。对你来说Mixin当然不是唯一可行的选择：比如说高阶组件就允许你组合相似函数，Mixin只是的一种实现方式。我喜欢Mixin，因为我不需要传递状态，但是这种模式当然也可能会被滥用，所以，仔细思考下哪种选择对你的应用最有意义吧！

avatar
文章
阅读
粉丝