vue 提供了 mixins 這個 API，可以讓我們將組件中的可復(fù)用功能抽取出來，放入 mixin 中，然后在組件中引入 mixin，可以讓組件顯得不再臃腫，提高了代碼的可復(fù)用性。

如何理解 mixins 呢 ？我們可以將 mixins 理解成一個數(shù)組，數(shù)組中有單或多個 mixin，mixin 的本質(zhì)就是一個 JS 對象，它可以有 data、created、methods 等等 vue 實例中擁有的所有屬性，甚至可以在 mixins 中再次嵌套 mixins，It’s amazing !

舉個簡單的栗子:

<div id='app'> <h1>{{ message }}</h1></div>

const myMixin = { data() { return { message: ’this is mixin message’ } }, created() { console.log(’mixin created’) }}const vm = new Vue({ el: ’#app’, mixins: [myMixin], data() { return { message: ’this is vue instance message’ } }, created() { console.log(this.message) // => Root Vue Instance console.log(’vue instance created’) // => created myMixin // => created Root Vue Instance }})

mixins 與 Vue Instance 合并時，會將 created 等鉤子函數(shù)合并成數(shù)組，mixins 的鉤子優(yōu)先調(diào)用，當(dāng) data、methods 對象鍵值沖突時，以組件優(yōu)先。

PS: 如果對 mixins 的概念還不太清的小伙伴，可以去 vue 官方文檔 看一下 vue mixins 的基本概念和用法。

那 mixins 是如何實現(xiàn)的呢 ？當(dāng) vue 在實例化的時候，會調(diào)用 mergeOptions 函數(shù)進行 options 的合并，函數(shù)申明在 vue/src/core/util/options.js 文件。

export function mergeOptions( parent: Object, child: Object, vm?: Component): Object { ... // 如果有 child.extends 遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝 const extendsFrom = child.extends if (extendsFrom) { parent = mergeOptions(parent, extendsFrom, vm) } // 如果有 child.mixins 遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝 if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) } } // 申明 options 空對象，用來保存屬性拷貝結(jié)果 const options = {} let key // 遍歷 parent 對象，調(diào)用 mergeField 進行屬性拷貝 for (key in parent) { mergeField(key) } // 遍歷 parent 對象，調(diào)用 mergeField 進行屬性拷貝 for (key in child) { if (!hasOwn(parent, key)) { mergeField(key) } } // 屬性拷貝實現(xiàn)方法 function mergeField(key) { // 穿透賦值，默認(rèn)為 defaultStrat const strat = strats[key] || defaultStrat options[key] = strat(parent[key], child[key], vm, key) } return options}

為了保持代碼簡潔，已經(jīng)將 mergeOptions 函數(shù)不重要的代碼刪除，剩余部分我們慢慢來看。

const extendsFrom = child.extendsif (extendsFrom) { parent = mergeOptions(parent, extendsFrom, vm)}

首先申明 extendsFrom 變量保存 child.extends，如果 extendsFrom 為真，遞歸調(diào)用 mergeOptions 進行屬性拷貝，并且將 merge 結(jié)果保存到 parent 變量。

if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) }}

如果 child.mixins 為真，循環(huán) mixins 數(shù)組，遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝，仍舊將 merge 結(jié)果保存到 parent 變量。

接下來是關(guān)于 parent、child 的屬性賦值：

const options = {}let keyfor (key in parent) { mergeField(key)}for (key in child) { if (!hasOwn(parent, key)) { mergeField(key) }}

申明 options 空對象，用來保存屬性拷貝的結(jié)果，也作為遞歸調(diào)用 mergeOptions 的返回值。

這里首先會調(diào)用 for...in 對 parent 進行循環(huán)，在循環(huán)中不斷調(diào)用 mergeField 函數(shù)。

接著調(diào)用 for...in 對 child 進行循環(huán)，這里有點不太一樣，會調(diào)用 hasOwn 判斷 parent 上是否有這個 key，如果沒有再調(diào)用 mergeField 函數(shù)，這樣避免了重復(fù)調(diào)用。

那么這個 mergeField 函數(shù)到底是用來做什么的呢？

function mergeField(key) { // 穿透賦值，默認(rèn)為 defaultStrat const strat = strats[key] || defaultStrat options[key] = strat(parent[key], child[key], vm, key)}

mergeField 函數(shù)接收一個 key，首先會申明 strat 變量，如果 strats[key] 為真，就將 strats[key] 賦值給 strat。

const strats = config.optionMergeStrategies...optionMergeStrategies: Object.create(null),...

strats 其實就是 Object.create(null)，Object.create 用來創(chuàng)建一個新對象，strats 默認(rèn)是調(diào)用 Object.create(null) 生成的空對象。

順便說一句，vue 也向外暴露了 Vue.config.optionMergeStrategies，可以實現(xiàn)自定義選項合并策略。

如果 strats[key] 為假，這里會用 || 做穿透賦值，將 defaultStrat 默認(rèn)函數(shù)賦值給 strat。

const defaultStrat = function(parentVal: any, childVal: any): any { return childVal === undefined ? parentVal : childVal}

defaultStrat 函數(shù)返回一個三元表達式，如果 childVal 為 undefined，返回 parentVal，否則返回 childVal，這里主要以 childVal 優(yōu)先，這也是為什么有 component > mixins > extends 這樣的優(yōu)先級。

mergeField 函數(shù)最后會將調(diào)用 strat 的結(jié)果賦值給 options[key]。

mergeOptions 函數(shù)最后會 merge 所有 options、 mixins、 extends，并將 options 對象返回，然后再去實例化 vue。

我們來看看鉤子函數(shù)是怎么進行合并的。

function mergeHook( parentVal: ?Array<Function>, childVal: ?Function | ?Array<Function>): ?Array<Function> { return childVal ? parentVal ? parentVal.concat(childVal) : Array.isArray(childVal) ? childVal : [childVal] : parentVal}LIFECYCLE_HOOKS.forEach(hook => { strats[hook] = mergeHook})

循環(huán) LIFECYCLE_HOOKS 數(shù)組，不斷調(diào)用 mergeHook 函數(shù)，將返回值賦值給 strats[hook]。

export const LIFECYCLE_HOOKS = [ ’beforeCreate’, ’created’, ’beforeMount’, ’mounted’, ’beforeUpdate’, ’updated’, ’beforeDestroy’, ’destroyed’, ’activated’, ’deactivated’, ’errorCaptured’]

LIFECYCLE_HOOKS 就是申明的 vue 所有的鉤子函數(shù)字符串。

mergeHook 函數(shù)會返回 3 層嵌套的三元表達式。

return childVal ? parentVal ? parentVal.concat(childVal) : Array.isArray(childVal) ? childVal : [childVal] : parentVal

第一層，如果 childVal 為真，返回第二層三元表達式，如果為假，返回 parentVal。

第二層，如果 parentVal 為真，返回 parentVal 和 childVal 合并后的數(shù)組，如果 parentVal 為假，返回第三層三元表達式。

第三層，如果 childVal 是數(shù)組，返回 childVal，否則將 childVal 包裝成數(shù)組返回。

new Vue({ created: [ function() { console.log(’沖沖沖！’) }, function() { console.log(’鴨鴨鴨！’) } ]})// => 沖沖沖！// => 鴨鴨鴨！項目實踐

使用 vue 的小伙伴們，當(dāng)然也少不了在項目中使用 element-ui。比如使用 Table 表格的時候，免不了申明 tableData、total、pageSize 一些 Table 表格、Pagination 分頁需要的參數(shù)。

我們可以將重復(fù)的 data、methods 寫在一個 tableMixin 中。

export default { data() { return { total: 0, pageNo: 1, pageSize: 10, tableData: [], loading: false } }, created() { this.searchData() }, methods: { // 預(yù)申明，防止報錯 searchData() {}, handleSizeChange(size) { this.pageSize = size this.searchData() }, handleCurrentChange(page) { this.pageNo = page this.searchData() }, handleSearchData() { this.pageNo = 1 this.searchData() } }}

當(dāng)我們需要使用時直接引入即可：

import tableMixin from ’./tableMixin’export default { ... mixins: [tableMixin], methods: { searchData() { ... } }}

我們在組件內(nèi)會重新申明 searchData 方法。類似這種 methods 對象形式的 key，如果 key 相同，組件內(nèi)的 key 會覆蓋 tableMixin 中的 key。

當(dāng)然我們也可以在 mixins 中嵌套 mixins，申明 axiosMixin:

import tableMixin from ’./tableMixin’export default { mixins: [tableMixin], methods: { handleFetch(url) { const { pageNo, pageSize } = this this.loading = true this.axios({method: ’post’,url,data: { ...this.params, pageNo, pageSize} }).then(({ data = [] }) => { this.tableData = data this.loading = false}).catch(error => { this.loading = false}) } }}

引入 axiosMixin：

import axiosMixin from ’./axiosMixin’export default { ... mixins: [axiosMixin], created() { this.handleFetch(’/user/12345’) }}

在 axios 中，我們可以預(yù)先處理 axios 的 success、error 的后續(xù)調(diào)用，是不是少寫了很多代碼。

順便講一下 extend，與 mixins 相似，只能傳入一個 options 對象，并且 mixins 的優(yōu)先級比較高，會覆蓋 extend 同名 key 值。

// 如果有 child.extends 遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝const extendsFrom = child.extendsif (extendsFrom) { parent = mergeOptions(parent, extendsFrom, vm)}// 如果有 child.mixins 遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) }}

// 如果有 child.extends 遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝const extendsFrom = child.extendsif (extendsFrom) { parent = mergeOptions(parent, extendsFrom, vm)}// 如果有 child.mixins 遞歸調(diào)用 mergeOptions 實現(xiàn)屬性拷貝if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) }}

在 mergeOptions 函數(shù)中，會先對 extends 進行屬性拷貝，然后再對 mixin 進行拷貝，在調(diào)用 mergeField 函數(shù)的時候會優(yōu)先取 child 的 key。

雖然 extends 的同名 key 會被 mixins 的覆蓋，但是 extends 是優(yōu)先執(zhí)行的。

注意一下 vue 中 mixins 的優(yōu)先級，component > mixins > extends。

我們暫且將 mixins 稱作是組件模塊化，靈活運用組件模塊化，可以將組件內(nèi)的重復(fù)代碼提取出來，實現(xiàn)代碼復(fù)用，也使我們的代碼更加清晰，效率也大大提高。

當(dāng)然，mixins 還有更加神奇的操作等你去探索。

以上就是vue使用mixins優(yōu)化組件的詳細(xì)內(nèi)容，更多關(guān)于vue 用mixins優(yōu)化組件的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！