混入 · JS與WEB前端框架技術

# 混入 ## 基礎混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。例子： ~~~ // 定義一個混入對象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定義一個使用混入對象的組件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" ~~~ ## [選項合并](https://cn.vuejs.org/v2/guide/mixins.html#%E9%80%89%E9%A1%B9%E5%90%88%E5%B9%B6 "選項合并") 當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”。比如，數據對象在內部會進行遞歸合并，并在發生沖突時以組件數據優先。 ~~~ 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('組件鉤子被調用') } }) // => "混入對象的鉤子被調用" // => "組件鉤子被調用" ~~~ 值為對象的選項，例如`methods`、`components`和`directives`，將被合并為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。 ~~~ var mixin = { methods: { foo: function () { console.log('foo') }, conflicting: function () { console.log('from mixin') } } } var vm = new Vue({ mixins: [mixin], methods: { bar: function () { console.log('bar') }, conflicting: function () { console.log('from self') } } }) vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self" ~~~ 注意：`Vue.extend()`也使用同樣的策略進行合并。 ## [全局混入](https://cn.vuejs.org/v2/guide/mixins.html#%E5%85%A8%E5%B1%80%E6%B7%B7%E5%85%A5 "全局混入") 混入也可以進行全局注冊。使用時格外小心！一旦使用全局混入，它將影響**每一個**之后創建的 Vue 實例。使用恰當時，這可以用來為自定義選項注入處理邏輯。 ~~~ // 為自定義的選項 'myOption' 注入一個處理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!" ~~~ 請謹慎使用全局混入，因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用于自定義選項，就像上面示例一樣。推薦將其作為[插件](https://cn.vuejs.org/v2/guide/plugins.html)發布，以避免重復應用混入。 ## [自定義選項合并策略](https://cn.vuejs.org/v2/guide/mixins.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%80%89%E9%A1%B9%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A5 "自定義選項合并策略") 自定義選項將使用默認策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合并，可以向`Vue.config.optionMergeStrategies`添加一個函數： ~~~ Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合并后的值 } ~~~ 對于多數值為對象的選項，可以使用與`methods`相同的合并策略： ~~~ var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods ~~~ 可以在[Vuex](https://github.com/vuejs/vuex)1.x 的混入策略里找到一個更高級的例子： ~~~ const merge = Vue.config.optionMergeStrategies.computed Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) { if (!toVal) return fromVal if (!fromVal) return toVal return { getters: merge(toVal.getters, fromVal.getters), state: merge(toVal.state, fromVal.state), actions: merge(toVal.actions, fromVal.actions) } } ~~~