污染
目錄
##選項合併
全域混入
自訂選項合併策略
# 混入(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!"#當元件和當混入物件含有同名選項時，這些選項將以適當的方式進行「合併」。
例如，資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。
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() 也使用同樣的策略進行合併。
全域混入
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"######請謹慎使用全域混入，因為它會影響每個單獨建立的 Vue 實例 (包含第三方元件)。大多數情況下，只應應用於自訂選項，就像上面範例一樣。推薦將其作為###插件###發布，以避免重複應用混入。 ########################自訂選項合併策略###############自訂選項將使用預設策略，即簡單地覆寫已有值。如果想要讓自訂選項以自訂邏輯合併，可以在###Vue.config.optionMergeStrategies### 新增一個函數：######Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}###對於多數值為物件的選項，可以使用與###methods### 相同的合併策略：###var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods###可以在###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)
}
}#### ######## ###
