## 一、概述 混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。 >[danger] > 1、簡單來說，就是把混入的對象合并進入使用的組件對象，比如把混入對象的data合并到使用組件的data，混入對象的created等鉤子合并到使用組件的鉤子等等，相當于合并了兩個對象； > 2、當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”。比如，數據對象在內部會進行遞歸合并，并在發生沖突時以組件數據優先。 ## 二、實例 簡單實例： ``` // 定義一個混入對象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from myMixin !') } } } // 定義一個使用混入對象的組件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from myMixin !" ``` 數據合并沖突： ``` var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } } }) ``` 同名鉤子函數將合并為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子**之前**調用。 ``` var mixin = { created: function () { console.log('混入對象的鉤子被調用') } } new Vue({ mixins: [mixin], created: function () { console.log('組件鉤子被調用') } }) // => "混入對象的鉤子被調用" // => "組件鉤子被調用" ``` ## 三、全局混入 參考：[混入選項](選項對象/混入選項.md)