vue3 mixin 混入使用方法
目錄
- 一、mixin 如何使用 ？
- 二、mixin 使用時注意點
- 2.1、使用 mixin 物件時，元件內部和 mixin 包含相同選項，如何處理呢？
- 2.2、使用的 mixin 物件選項 和例項中的選項擁有相同的屬性該如何處理？
- 2.3、mixin 物件也可以新增生命週期鉤子函式
- 三、mixin 自定義屬性
- 四、合併策略
- 五、全域性配置 mixin
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 時www.cppcns.com
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');
}
}
執行結果：
我們發現生命週期函式會合並執行，優先執行 mixin 中的， 然後再執行例項中的。
三、mixin 自定義屬性
$options 用於當前元件例項 的初始化選項，需要在選項中包含自定義 property 時會有用處。
簡單講，$o客棧ptions 用於在例項中呼叫 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. 檔案內引入：
app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{
return mixinVal || appVal
}
再次執行之後，我們發現列印結果變成 mixin 中的屬性值了：
console.log(this.$options.custom); // 列印結果：mixin custom
五、全域性配置 mixin
如果專案中有多個元件複用某些選項時，我們可以通過全域性使用 mixin 物件。一個例項也可以引入多個 mixin 物件。
語法如下：
app.mixin([ {},{},{} ])
到此這篇關於 vue3 mixin 混入使用方法的文章就介紹到這了,更多相關 vue3 mixin 混入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！