vue.js3 學習筆記 (一)——mixin 混入

前端人發表於2021-11-15
Vue.jsS3筆記

vue 2 中採用選項式API。如：data、methods、watch、computed以及生命週期鉤子函式等等。

mixin 混入，提供了一種非常靈活的方式，來分發 vue 元件中的可複用功能，一個mixin 物件可以包含任意元件選項，當元件使用 mixin 物件時，所有的 mixin 物件的選項將被混入元件本身的選項。

一、mixin 如何使用 ？

通俗地講，mixin 物件把一些元件公用的選項，如data內資料，方法、計算屬性、生命週期鉤子函式，單獨提取出來，然後在元件內引入，就可以與元件本身的選項進行合併。

示例1：

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

 

就相當於：

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

 

這樣做的好處就是可以把多個元件公共選項抽取到一個 mixin 物件內，需要的時候直接引入就可以了。

二、mixin 使用時注意點

mixin 包含的選項，同時元件內也可以包含這些選項，如果 mixin 中包含的選項中，有部分屬性相同怎麼辦？如 mixin 和元件內都存在一個同名方法時，如何處理？或者都包含生命週期鉤子函式時，它們的執行順序誰前誰後呢？接下來我們就看看，使用 mixin 時應該注意的點。

2.1、使用 mixin 物件時，元件內部和 mixin 包含相同選項，如何處理呢？

示例2：mixin 物件和例項都包含data選項，內部有兩個不同的變數

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

 

執行後，我們發現兩個變數都能使用，mixin 物件中的 data 與例項中的 data 選項進行合併了。對於 methods 、computed 也是一樣的。

如果我們把上個例項中的兩個變數，修改成同名時，會怎樣呢？

2.2、使用的 mixin 物件選項 和例項中的選項擁有相同的屬性該如何處理？

示例3：data 內擁有相同的變數名 name

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

 

執行結果，name 值為 “前端人”。

屬性值相同時，會選擇就近原則，優先繼承例項內的值，所以 mixin 物件的屬性會被例項中的屬性給覆蓋掉。

2.3、mixin 物件也可以新增生命週期鉤子函式，mixin 和 例項中 的那個優先執行呢？

示例4：mixin 加入生命週期鉤子函式，以 mounted 為例

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

 

執行結果：

vue.js3 學習筆記 (一)——mixin 混入

 

我們發現生命週期函式會合並執行，優先執行 mixin 中的， 然後再執行例項中的。

三、mixin 自定義屬性

$options 用於當前元件例項 的初始化選項，需要在選項中包含自定義 property 時會有用處。

簡單講，$options 用於在例項中呼叫 mixin 自定義屬性。

示例5：新增自定義屬性

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

在例項中使用：

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

 

如果在例項中也包含一個同名自定義屬性時，優先順序會作何處理呢？如果我們想控制優先順序又該如何處理呢？

四、合併策略

optionMergeStrategies 選項合併策略，使用 mixin 自定義屬性和例項中的屬性衝突時，使用optionMergeStrategies 定義合併規則的，也就是優先使用誰的問題。

使用規則：

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

 

根據上述示例5，給例項中加 custom 屬性，執行檢視結果。

示例6：驗證 mixin 和 例項 屬性優先順序

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

 

發現，mixin 物件中的屬性值被例項中屬性值覆蓋掉了。我們可以借用上述的 optionMergeStrategies 屬性，修改 custom 的合併規則。

在 main.js 檔案內引入：

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

 

再次執行之後，我們發現列印結果變成 mixin 中的屬性值了：

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

五、全域性配置 mixin

如果專案中有多個元件複用某些選項時，我們可以通過全域性使用 mixin 物件。一個例項也可以引入多個 mixin 物件。語法如下：

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

 

相關文章