006-讀書筆記-Vue官網 混合

1.認識混合

• 混合(mixins)是一種分發Vue組件中可複用功能的很是靈活的方式
• 混合的做用：抽取多個組件的共同部分，加強組件的可複用性
• 混合的實質：混合對象相似一個Vue實例，能夠包含Vue實例中的任意選項；使用混合對象時，至關於把混合對象的全部選項都注入到了組件中

2.混合的簡單使用

2-1 沒有使用混合的狀況

當組件A中有一個方法methodCommon，組件B中一樣有一個方法methodCommon，若是每一個組件中都寫這個方法，會出現不少重複性代碼：

<!-- componentA.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  export defautl {
    methods: {
      methodCommon() {
        return 'this is a method ...'
      }
    }
  }
</script>

<!-- componentB.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  export defautl {
    methods: {
      methodCommon() {
        return 'this is a method ...'
      }
    }
  }
</script>

2-2 使用混合優化代碼

上面代碼中的重複部分，能夠抽取一個公共的mixin：

// mixin.js

export default {
  methods: {
    methodCommon() {
      return 'this is a method ...'
    }
  }
}

而後在每個組件中引入該mixin.js便可：

<!-- componentA.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ]
  }
</script>

<!-- componentB.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ]
  }
</script>

經過混合，提升了代碼的複用性。

3.混合中的鉤子函數

3-1 同名鉤子函數都會執行

若是組件A中存在鉤子函數，混合中也存在相同的鉤子函數，那麼兩個鉤子函數都會執行。
執行順序是混合中的鉤子函數先執行，組件中的鉤子函數後執行。

// mixin.js

export default {
  created() {
    console.log('mixin created ...')
  }
}

<!-- componentA.vue -->

<template>
  <div>component A</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ],
    created() {
      console.log('componentA created ...')
    }
  }
</script>

最終的執行結果：

mixin created ...
componentA created ...

3-2 多個混合的鉤子函數

多個混合的鉤子函數，會根據混合使用的順序來執行。

mixins: [ 'mixin1', 'mixin2' ]

執行的時候，會先執行mixin1中的鉤子函數，再執行mixin2中的鉤子函數，最後執行當前組件中的鉤子函數。

4.混合中的對象選項

混合中的對象選項，如directives filters components data computed methods等會被混合成一個對象的屬性，若是鍵值對相同，會優先根據組件中的內容進行輸出。

// mixin.js

export default {
  data() {
    return {
      msg: 'mixin msg ...'
    }
  }
}

<!-- componentA.vue -->

<template>
  <div>{{ msg }}</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ],
    data() {
      return {
        msg: 'componentA msg ...'
      }
    }
  }
</script>

最終會輸出組件A中的msg：componentA msg ...

5.參考內容

• 混合