一、mixin是什么

mixin是面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言中的類(lèi)，提供了方法的實(shí)現(xiàn)。其他類(lèi)可以訪問(wèn)mixin類(lèi)的方法而不必成為其子類(lèi)；

mixin類(lèi)通常作為功能模塊使用，在需要該功能時(shí)“混入”，有利于代碼復(fù)用又避免了多繼承的復(fù)雜。

本質(zhì)就是一個(gè)JS對(duì)象，可以包含組件中的任意功能選項(xiàng)，如data、components、methods、creaded、computed以及生命周期函數(shù)等等。

只需要將共用的功能以對(duì)象的方式傳入mixins選項(xiàng)中，當(dāng)組件使用mixins對(duì)象時(shí)所有mixins對(duì)象的對(duì)象都將被混入該組件本身的選項(xiàng)中來(lái)。

局部混入

import mixin1 from './mixin1'
export default {
    // mixins:[mixin1]
}

全局混入

Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

注意：當(dāng)組件存在與mixin對(duì)象相同的選項(xiàng)的時(shí)候，進(jìn)行遞歸合并的時(shí)候組件的選項(xiàng)會(huì)覆蓋mixin的選項(xiàng)；但是如果相同的選項(xiàng)為生命周期鉤子的時(shí)候，會(huì)合并成一個(gè)數(shù)組，先執(zhí)行mixin的鉤子，再執(zhí)行組件的鉤子。

二、使用場(chǎng)景

在開(kāi)發(fā)中，經(jīng)常會(huì)遇到在不同的組件中用到相同或者相似的代碼，這些代碼的功能相對(duì)獨(dú)立；

例子

控制元素是否顯示，都會(huì)使用v-show，如果兩個(gè)組件中使用的變量和規(guī)則都相同，就可以把控制元素顯示單獨(dú)封裝成一個(gè)mixin.js文件。

modal.vue中

<template>
  <div id="app">
    <button @click="show()">modal顯示與隱藏</button>
    <div v-show="isShowing">modal顯示</div>
  </div>
</template>
<script>
import mixin1 from './mixin1'
export default {
    mixins:[mixin1]
}
</script>

tooltip中

<template>
  <div id="app">
    <button @click="show()">tooltip顯示與隱藏</button>
    <div v-show="isShowing">tooltip顯示</div>
  </div>
</template>
<script>
import mixin1 from './mixin1'
export default {
    mixins:[mixin1],
}
</script>

mixin1.js中

export default {
    data() {
        return {
            isShowing:true
        }
    },
    methods: {
        show() { 
            this.isShowing = !this.isShowing
        }
    },
}

三、原理分析

• 優(yōu)先遞歸處理mixins；
• 先遍歷合并parent中的key，調(diào)用mergeField方法進(jìn)行合并，然后保存在變量options；
• 再遍歷child，合并補(bǔ)上parent中沒(méi)有的key，調(diào)用mergeField方法進(jìn)行合并，保存在變量options；
• 通過(guò)mergeField函數(shù)進(jìn)行合并；
• 合并策略包括：替換型、合并型、隊(duì)列型、疊加型；
• 替換行策略有：props、methods、inject、computed；
• 合并型策略是data，通過(guò)set方法進(jìn)行合并和重新賦值，就是將新的同名參數(shù)替代舊的參數(shù)；
• 隊(duì)列型策略有生命周期函數(shù)和watch，原理是將函數(shù)存入一個(gè)數(shù)據(jù)，然后正序遍歷依次執(zhí)行。
• 疊加型有component、directives、filters，通過(guò)原型鏈進(jìn)行層層的疊加。

四、mixin的理解

回答：mixin是一種類(lèi)，在vue中就是js文件，主要的作用是作為功能模塊引用。因?yàn)樵陧?xiàng)目中，可能不同組件會(huì)有相同的功能，比如控制元素的顯示和隱藏，如果他們的變量和規(guī)則也完全相同的話，就可以把這個(gè)功能單獨(dú)提取出來(lái)，放在mixin.js中，再引入，就可以實(shí)現(xiàn)一樣的功能了。引入的方法也分為全局混入和局部混入，局部混入就是在每個(gè)組件中引入，全局混入就是在main.js中通過(guò)Vue.mixin()引入。

到此這篇關(guān)于vue混入mixin的介紹及理解的文章就介紹到這了,更多相關(guān)vue mixin內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論