不足
官網(wǎng)原文如下：
簡(jiǎn)單來(lái)說(shuō)不足有二：
1、所有屬性都會(huì)合并到組件里面孽拷，所以相同命名會(huì)沖突。
2半抱、寫完就定下來(lái)了脓恕，不夠靈活
vue3 提供了 setup膜宋，來(lái)解決這些問(wèn)題。
個(gè)人見(jiàn)解炼幔，其實(shí)在vue2的時(shí)候就很少使用mixin來(lái)抽象邏輯秋茫，一般抽象邏輯都會(huì)使用一個(gè)封裝的js對(duì)象。而mixin更多的是像封裝一個(gè)“基類”那樣乃秀，提供給組件繼承肛著，暫時(shí)而言個(gè)人還是覺(jué)得類似于“基類”這樣的用法，使用mixin挺好跺讯。
基礎(chǔ)
mixin 對(duì)象可以包含任意組件選項(xiàng)枢贿。當(dāng)組件使用 mixin 對(duì)象時(shí)，所有 mixin 對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)刀脏。例如：
// 定義一個(gè) mixin 對(duì)象
const testMixin = {
created() {
this.test()
},
methods: {
test() {
console.log('from test mixin!')
}
}
}
export default {
mixins: [testMixin]
}
// 當(dāng)這個(gè)組件被創(chuàng)建時(shí)局荚，會(huì)看到日志：from test mixin!
選項(xiàng)合并
當(dāng)組件和 mixin 對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”愈污。
比如耀态，每個(gè) mixin 可以擁有自己的 data 函數(shù)。每個(gè) data 函數(shù)都會(huì)被調(diào)用暂雹，并將返回結(jié)果合并首装。該數(shù)據(jù)的 property 發(fā)生沖突時(shí)，會(huì)以組件自身的數(shù)據(jù)為優(yōu)先杭跪。
// 定義一個(gè) mixin 對(duì)象
const testMixin = {
data() {
return {
message: 'hello',
foo: 'abc'
}
},
methods: {
test() {
console.log(this.$data)
}
}
}
export default {
mixins: [testMixin],
data() {
return {
message: 'goodbye',
bar: 'def'
}
},
created() {
this.test() // => { message: "goodbye", foo: "abc", bar: "def" }
}
}
同名鉤子函數(shù)將合并為一個(gè)數(shù)組仙逻，因此都將被調(diào)用。另外揍魂，mixin 對(duì)象的鉤子將在組件自身鉤子之前調(diào)用桨醋。
const testMixin = {
created() {
console.log('mixin 對(duì)象的鉤子被調(diào)用')
}
}
export default {
mixins: [testMixin],
created() {
console.log('組件鉤子被調(diào)用')
}
}
// => "mixin 對(duì)象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"
值為對(duì)象的選項(xiàng)棚瘟，例如 methods现斋、components 和 directives，將被合并為同一個(gè)對(duì)象偎蘸。兩個(gè)對(duì)象鍵名沖突時(shí)庄蹋，取組件對(duì)象的鍵值對(duì)。
const testMixin = {
methods: {
foo() {
console.log('foo')
},
conflicting() {
console.log('from mixin')
}
}
}
export default {
mixins: [testMixin],
methods: {
bar() {
console.log('bar')
},
conflicting() {
console.log('from self')
}
},
created() {
this.foo() // => "foo"
this.bar() // => "bar"
this.conflicting() // => "from self"
}
}
注意
vue3.x Mixin 合并行為發(fā)生了變更迷雪，當(dāng)來(lái)自組件的 data() 及其 mixin 或 extends 基類被合并時(shí)限书，合并操作現(xiàn)在將被淺層次地執(zhí)行：
const testMixin = {
methods: {
data() {
return {
user: {
name: 'Jack',
id: 1
}
}
}
}
}
export default {
mixins: [testMixin],
data() {
return {
user: {
id: 2
}
}
},
created() {
console.log(this.$data)
}
}
在 Vue 2.x 中，生成的 $data 是：
{
"user": {
"id": 2,
"name": "Jack"
}
}
在 3.0 中章咧，其結(jié)果將會(huì)是：
{
"user": {
"id": 2
}
}
全局 mixin
額倦西，全局mixin還是少用吧，應(yīng)該說(shuō)別用吧赁严，這玩意真的真的覺(jué)得有點(diǎn)坑扰柠。一旦使用全局 mixin粉铐，它將影響每一個(gè)之后創(chuàng)建的組件 (例如，每個(gè)子組件)卤档。
全局mixin如下：
app.mixin({
created() {
console.log("form mixin!")
}
})
光這樣一個(gè)log蝙泼，就會(huì)導(dǎo)致"form mixin!"竟然會(huì)被輸出一排。最后強(qiáng)調(diào)下劝枣，別用汤踏！
自定義選項(xiàng)合并策略
自定義選項(xiàng)在合并時(shí)，默認(rèn)策略為簡(jiǎn)單地覆蓋已有值舔腾。如果想讓某個(gè)自定義選項(xiàng)以自定義邏輯進(jìn)行合并溪胶，可以在 app.config.optionMergeStrategies 中添加一個(gè)函數(shù)：
const app = Vue.createApp({})
app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
// toVal 組件數(shù)據(jù)；
// fromVal mixin數(shù)據(jù)
// return mergedVal
}
實(shí)際開(kāi)發(fā)過(guò)程中合并策略也很少使用稳诚，更多的會(huì)使用一些邏輯代碼所代替载荔，這種隱式的寫法并不太好理解。
關(guān)于setup使用mixin的相關(guān)內(nèi)容后續(xù)再寫采桃，謝謝閱讀懒熙。
原創(chuàng)不易，歡迎指正普办。
