vue 中的mixin 认真拿下它

很久之前就知道有mixin ， 但是一直都没整明白，今天就认真整理一下，搞定它

通常的学习路径是这样的

• 第一步： 读了一下官网的介绍
• 第二步：查看几个博文
• 第三步： 如果还是看不懂，就返回第一步
• 第四步： 亲手试一下代码

或者直接跳到下一个标题，我们一起捋一捋争取一文搞的明明白白~

• 往下跳一大步
  
  

第一步： 读了一下官网的介绍

• vue2.X 混入 (mixin)

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

例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

第二步：查看几个博文

• 简书 vue之mixin理解与使用
  
  

第三步： 如果还是看不懂，就返回第一步

我们一起捋一捋

1 . mixins 与vuex的区别

经过上面的例子之后，他们之间的区别应该很明显了哈~

• vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
• Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

2. mixins与公共组件的区别

同样明显的区别来再列一遍哈~

• 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
• Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
  单纯组件引用：
            父组件 + 子组件 >>> 父组件 + 子组件
       mixins：
            父组件 + 子组件 >>> new父组件

作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

举个例子

定义一个 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]
}

搞定~
添加对比之后，才知道我们要的是什么，不要的是什么，加油~