一、mixin是什么

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

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

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

只需要將共用的功能以對象的方式傳入mixins選項中，當組件使用mixins對象時所有mixins對象的對象都將被混入該組件本身的選項中來。

局部混入

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

全局混入

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

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

二、使用場景

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

例子

控制元素是否顯示，都會使用v-show，如果兩個組件中使用的變量和規(guī)則都相同，就可以把控制元素顯示單獨封裝成一個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方法進行合并，然后保存在變量options；
• 再遍歷child，合并補上parent中沒有的key，調(diào)用mergeField方法進行合并，保存在變量options；
• 通過mergeField函數(shù)進行合并；
• 合并策略包括：替換型、合并型、隊列型、疊加型；
• 替換行策略有：props、methods、inject、computed；
• 合并型策略是data，通過set方法進行合并和重新賦值，就是將新的同名參數(shù)替代舊的參數(shù)；
• 隊列型策略有生命周期函數(shù)和watch，原理是將函數(shù)存入一個數(shù)據(jù)，然后正序遍歷依次執(zhí)行。
• 疊加型有component、directives、filters，通過原型鏈進行層層的疊加。

四、mixin的理解

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

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

最新評論