[[435190]]

vue 2 中采用選項(xiàng)式API。如：data、methods、watch、computed以及生命周期鉤子函數(shù)等等。

mixin 混入，提供了一種非常靈活的方式，來(lái)分發(fā) vue 組件中的可復(fù)用功能，一個(gè)mixin 對(duì)象可以包含任意組件選項(xiàng)，當(dāng)組件使用 mixin 對(duì)象時(shí)，所有的 mixin 對(duì)象的選項(xiàng)將被混入組件本身的選項(xiàng)。

一、mixin 如何使用 ?

通俗地講，mixin 對(duì)象把一些組件公用的選項(xiàng)，如data內(nèi)數(shù)據(jù)，方法、計(jì)算屬性、生命周期鉤子函數(shù)，單獨(dú)提取出來(lái)，然后在組件內(nèi)引入，就可以與組件本身的選項(xiàng)進(jìn)行合并。

示例1：

<script> 
const myMixin = { 
 data(){ 
  return { 
   num:520 
  } 
 }, 
 mounted(){ 
  console.log('mixin mounted'); 
 } 
} 
export default { 
  mixins:[myMixin], 
} 
</script> 

就相當(dāng)于：

<script> 
export default { 
 data(){ 
  return { 
   num:520 
  } 
 }, 
 mounted(){ 
  console.log('mixin mounted'); 
 } 
} 
</script> 

這樣做的好處就是可以把多個(gè)組件公共選項(xiàng)抽取到一個(gè) mixin 對(duì)象內(nèi)，需要的時(shí)候直接引入就可以了。

二、mixin 使用時(shí)注意點(diǎn)

mixin 包含的選項(xiàng)，同時(shí)組件內(nèi)也可以包含這些選項(xiàng)，如果 mixin 中包含的選項(xiàng)中，有部分屬性相同怎么辦?如 mixin 和組件內(nèi)都存在一個(gè)同名方法時(shí)，如何處理?或者都包含生命周期鉤子函數(shù)時(shí)，它們的執(zhí)行順序誰(shuí)前誰(shuí)后呢?接下來(lái)我們就看看，使用 mixin 時(shí)應(yīng)該注意的點(diǎn)。

2.1、使用 mixin 對(duì)象時(shí)，組件內(nèi)部和 mixin 包含相同選項(xiàng)，如何處理呢?

示例2：mixin 對(duì)象和實(shí)例都包含data選項(xiàng)，內(nèi)部有兩個(gè)不同的變量

<template> 
 <div> 
  {{qdr}}  -   {{name}}  
 </div> 
</template> 
<script> 
const myMixin = { 
 data(){ 
  return { 
   name:'熱愛(ài)前端的小姐姐' 
  } 
 } 
} 
export default { 
 mixins:[myMixin], 
 data(){ 
  return { 
   qdr:"前端人" 
  } 
 } 
} 
</script> 

運(yùn)行后，我們發(fā)現(xiàn)兩個(gè)變量都能使用，mixin 對(duì)象中的 data 與實(shí)例中的 data 選項(xiàng)進(jìn)行合并了。對(duì)于 methods 、computed 也是一樣的。

如果我們把上個(gè)實(shí)例中的兩個(gè)變量，修改成同名時(shí)，會(huì)怎樣呢?

2.2、使用的 mixin 對(duì)象選項(xiàng) 和實(shí)例中的選項(xiàng)擁有相同的屬性該如何處理?

示例3：data 內(nèi)擁有相同的變量名 name

<template> 
 <div> 
  {{name}}  
 </div> 
</template> 
<script> 
const myMixin = { 
 data(){ 
  return { 
   name:'熱愛(ài)前端的小姐姐' 
  } 
 } 
} 
export default { 
 mixins:[myMixin], 
 data(){ 
  return { 
   name:"前端人" 
  } 
 } 
} 
</script> 

運(yùn)行結(jié)果，name 值為 “前端人”。

屬性值相同時(shí)，會(huì)選擇就近原則，優(yōu)先繼承實(shí)例內(nèi)的值，所以 mixin 對(duì)象的屬性會(huì)被實(shí)例中的屬性給覆蓋掉。

2.3、mixin 對(duì)象也可以添加生命周期鉤子函數(shù)，mixin 和 實(shí)例中 的那個(gè)優(yōu)先執(zhí)行呢?

示例4：mixin 加入生命周期鉤子函數(shù)，以 mounted 為例

const myMixin = { 
 mounted(){ 
  console.log('mixin mounted'); 
 } 
} 
export default { 
 mixins:[myMixin], 
 mounted(){ 
  console.log('mounted'); 
 } 
} 

 運(yùn)行結(jié)果：

我們發(fā)現(xiàn)生命周期函數(shù)會(huì)合并執(zhí)行，優(yōu)先執(zhí)行 mixin 中的， 然后再執(zhí)行實(shí)例中的。

三、mixin 自定義屬性

$options 用于當(dāng)前組件實(shí)例 的初始化選項(xiàng)，需要在選項(xiàng)中包含自定義 property 時(shí)會(huì)有用處。

簡(jiǎn)單講，$options 用于在實(shí)例中調(diào)用 mixin 自定義屬性。

示例5：添加自定義屬性

const myMixin = { 
  custom:'自定義屬性' 
 } 

 在實(shí)例中使用：

mounted(){ 
 console.log(this.$options.custom); 
} 

 如果在實(shí)例中也包含一個(gè)同名自定義屬性時(shí)，優(yōu)先級(jí)會(huì)作何處理呢?如果我們想控制優(yōu)先級(jí)又該如何處理呢?

四、合并策略

optionMergeStrategies 選項(xiàng)合并策略，使用 mixin 自定義屬性和實(shí)例中的屬性沖突時(shí)，使用optionMergeStrategies 定義合并規(guī)則的，也就是優(yōu)先使用誰(shuí)的問(wèn)題。

使用規(guī)則：

app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{ 
  return appVal || mixinVal  // 確定優(yōu)先返回哪個(gè)屬性值 
} 

 根據(jù)上述示例5，給實(shí)例中加 custom 屬性，運(yùn)行查看結(jié)果。

示例6：驗(yàn)證 mixin 和 實(shí)例 屬性優(yōu)先級(jí)

<script> 
const myMixin = { 
  custom:'mixin custom', 
} 
export default { 
  custom:'app custom', 
  mixins:[myMixin], 
  mounted(){ 
    console.log(this.$options.custom); // 打印結(jié)果：app custom 
  } 
} 
</script> 

發(fā)現(xiàn)，mixin 對(duì)象中的屬性值被實(shí)例中屬性值覆蓋掉了。我們可以借用上述的 optionMergeStrategies 屬性，修改 custom 的合并規(guī)則。

在 main.js 文件內(nèi)引入：

app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{ 
 return mixinVal ||  appVal 
} 

 再次運(yùn)行之后，我們發(fā)現(xiàn)打印結(jié)果變成 mixin 中的屬性值了：

console.log(this.$options.custom); // 打印結(jié)果：mixin custom

五、全局配置 mixin

如果項(xiàng)目中有多個(gè)組件復(fù)用某些選項(xiàng)時(shí)，我們可以通過(guò)全局使用 mixin 對(duì)象。一個(gè)實(shí)例也可以引入多個(gè) mixin 對(duì)象。語(yǔ)法如下：

app.mixin([ {}, {}, {} ])