[前端开发]Vue mixin

• 两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？

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

• 具体应用在电商app中，better-scroll 中，每次mounted时需要通过加载图片的高度刷新容器高度，在Home和Detail中都用到了同样的方法，新建一个mixin.js

import {debounce} from 'common/utils'

export const itemListenerMixin = {
  data(){
    return {
      itemImgListener:null
    }
  },
  mounted(){
    let newRefresh = debounce(this.$refs.scroll.refresh,100)
    this.itemImgListener = () =>{
      newRefresh()
    }
    this.$bus.$on('itemImgLoad',this.itemImgListener)
    console.log('haha');
  }
}

• 在Home和Detail中引入、注册即可

import {itemListenerMixin} from 'common/mixin'

mixins:[itemListenerMixin]

mixin的执行顺序问题

• 当mixin中和组件中同时定义了相同的生命周期钩子，mixin会被先注册，此时组件中的生命周期钩子就可以对其进行修改，mixin也会被先推入数组，组件次之

  //mixin
  const hi = {
    mounted() {
      console.log('mixin')
    }
  }

  //component
  new Vue({
    el: '#app',
    mixins: [hi],
    mounted() {
      console.log('component')
    }
  });

  //output in console
  > component
  > component