混合模式mixin

混合模式mixin

1.什么是mixin
2.mixin可以用来做什么
3.怎么使用
1.简单点说，其实mixin就是对当前组件的扩展，可以用来分发组件的可复用功能，mixin对象可以包含任意组件选项
2.比如说多个页面有一个查看功能，接口地址，展示效果都是一样的，如果不提取出来，那么每个页面都需要写一遍，把它放到mixin之后，在页面中就可以直接调用查看功能的方法了
3.使用方式

myMixin.js
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}
export default myMixin

需要使用mixin的组件
<template>
  <div>
  </div>
</template>
<script>
import myMixin from './myMixin'
export default ({
  name: 'UseMixin',
  mixins: [myMixin],
});
</script>

运行结果：
从结果可以看出，使用mixin的组件中，没有created和methods这些选项，但是页面中却有打印的结果，所以说mixin是对组件的一种扩展，

任何需要使用mixin文件中的组件选项，都可以直接调用
修改以上mixin和调用mixin的组件

mixin文件
const myMixin = {
  created() {
    this.hello('mixin文件中自我调用')
  },
  methods: {
    hello(data) {
      console.log(data)
    }
  }
}
export default myMixin

调用mixin的组件
<template>
  <div>
  </div>
</template>

<script>
import myMixin from './myMixin'
export default ({
  name: 'UseMixin',
  mixins: [myMixin],
  created () {
  //引入mixin文件后，可以直接调用mixin中的方法
    this.hello('来自调用mixin文件的组件')
  }
});
</script>

如果mixin文件和使用mixin的组件中有相同的组件选项结果会是怎么样的呢
data选项

mixin文件
data () {
    return {
        id:1
    }
  },
  created() {
    console.log(this.id, 'mixin')
  },
  引入mixin的组件
   data () {
    return {
      id: 2
    }
  },
  created () {
    console.log(this.id, '引用mixin的组件')
  }

从运行的结果可以看出，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
生命周期钩子函数

mixin给钩子
created() {
    console.log('mixin的created钩子被调用')
  }
组件的钩子
  created () {
    console.log('组件的created钩子被调用')
  }

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods、components 和 directives

mixin
 methods: {
    bar () {
      console.log('mixin中的bar')
    },
    hello(data) {
      console.log('mixin的hello')
    }
  }
  组件
  foo () {
      console.log('组件中的foo')
    },
    hello () {
      console.log('组件的hello')
    }

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

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

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

为了解决这些问题，我们添加了一种通过逻辑关注点组织代码的新方法：组合式 API(即setup)。
想要具体了解组合式API可以