[前端開發]Vue mixin

• 2020 年 5 月 25 日
• 筆記

• 兩個非常相似的組件，他們的基本功能是一樣的，但他們之間又存在著足夠的差異性，此時的你就像是來到了一個分岔路口：我是把它拆分成兩個不同的組件呢？還是保留為一個組件，然後通過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