奇舞周刊推荐了一篇文章Vue.js 中使用Mixin， 用了vue大半年时间，mixin不知道挺惭愧。
奇舞周刊文章中已经介绍了 vue mixin。
- 官方提示谨慎使用 global mixin
- 合理的场景下使用
mixin
这里再补充一个 通用业务（埋点） 来描述 mixin的优缺点。
需求
在SPA实现埋点需求中比较通用的需求，进入页面 和 离开页面 需要记录用户在 当前页面的 停留时间。使用mixin， 简化代码如下
mixin.js
let cache = null // 确保进入和离开是一个page
export default {
methods: {
sendEnterPage() {
cache = this.$route
console.log('enter page', cache)
},
sendLeavePage() {
console.log('leave page', cache)
}
},
mounted(){
this.sendEnterPage()
},
destroyed() {
this.sendLeavePage()
}
}
demo.vue 部分代码
<script>
import test from 'mixins/test'
export default {
data() {
return { text: 'Hello World' }
},
mixins: [test],
methods: {
logic() {
console.log('do the logic about hello page')
}
},
mounted() {
this.logic()
}
}运行结果图
从图中发现，使用局部mixin 使用 mounted, destroyed 等组件中的生成周期方法与 mixin 是 合并； 当然实验得出 methods中的方法是被覆盖的。具体是通过 mergeOtions function实现
好处
埋点这部分需求 与 核心业务 关联, 代码少，尽可能的少侵入业务。
坏处
minxin中的方法 以及实现 逻辑 其他同事不知道，不直观。 只能通过约定和沟通来解决。
以上功能有种 “修饰” 的感觉。es7 decorator 支持修饰模式，当局限于 类和类的方法， vue官方提供了 vue-class-component 来解决这个问题。
在React当中已经废弃了 mixin，使用了 高阶组件 来解决这个问题，其实就是支持 class组件，结合decorator来
代替mixin。 关于react理解的不对，请指出。
总结
本篇是对mixin的看法和对业务的结合点，如有不对欢迎指正，转载请注明出处。
