vue 提供了 mixins 這個 API，可以讓我們將元件中的可複用功能抽取出來，放入 mixin 中，然後在元件中引入 mixin，可以讓元件顯得不再臃腫，提高了程式碼的可複用性。

如何理解 mixins 呢 ？我們可以將 mixins 理解成一個數組，陣列中有單或多個 mixin，mixin 的本質就是一個 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 等鉤子函式合併成陣列，mixins 的鉤子優先呼叫，當 data、methods 物件鍵值衝突時，以元件優先。

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

mixins 實現

那 mixins 是如何實現的呢 ？當 vue 在例項化的時候，會呼叫 mergeOptions 函式進行 options 的合併，函式申明在 vue/src/core/util/options.js 檔案。

export function mergeOptions(
  parent: Object,child: Object,vm?: Component
): Object {
  ...
  // 如果有 child.extends 遞迴呼叫 mergeOptions 實現屬性拷貝
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent,extendsFrom,vm)
  }
  // 如果有 child.mixins 遞迴呼叫 mergeOptions 實現屬性拷貝
  if (child.mixins) {
    for (let i = 0,l = child.mixins.length; i < l; i++) {
      parent =ZexvKaJwXE
 
 mergeOptions(parent,child.mixins[i],vm)
    }
  }
  // 申明 options 空物件，用來儲存屬性拷貝結果
  const options = {}
  let key
  // 遍歷 parent 物件，呼叫 mergeField 進行屬性拷貝
  for (key in parent) {
    mergeField(key)
  }
  // 遍歷 parent 物件，呼叫 mergeField 進行屬性拷貝
  for (key in child) {
    if (!hasOwn(parent,key)) {
      mergeField(key)
    }
  }
  // 屬性拷貝實現方法
  function mergeField(key) {
    // 穿透賦值，預設為 defaultStrat
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key],child[key],vm,key)
  }
  return options
}

為了保持程式碼簡潔，已經將 mergeOptions 函式不重要的程式碼刪除，剩餘部分我們慢慢來看。

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

首先申明 extendsFrom 變數儲存 child.extends，如果 extendsFrom 為真，遞迴呼叫 mergeOptions 進行屬性拷貝，並且將 merge 結果儲存到 parent 變數。

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

如果 child.mixins 為真，迴圈 mixins 陣列，遞迴呼叫 mergeOptions 實現屬性拷貝，仍舊將 merge 結果儲存到 parent 變數。

接下來是關於 parent、child 的屬性賦值：

const options = {}
let key

for (key in parent) {
  mergeField(key)
}

for (key in child) {
  if (!hasOwn(parent,key)) {
    mergeField(key)
  }
}

申明 options 空物件，用來儲存屬性拷貝的結果，也作為遞迴呼叫 mergeOptions 的返回值。

這裡首先會呼叫 for...in 對 parent 進行迴圈，在迴圈中不斷呼叫 mergeField 函式。

接著呼叫 for...in 對 child 進行迴圈，這裡有點不太一樣，會呼叫 hasOwn 判斷 parent 上是否有這個 key，如果沒有再呼叫 mergeField 函式，這樣避免了重複呼叫。

那麼這個 mergeField 函式到底是用來做什麼的呢？

function mergeField(key) {
  // 穿透賦值，預設為 defaultStrat
  const strat = strats[key] || defwww.cppcns.comaultStrat
  options[key] = strat(parent[key],key)
}

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

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

strats 其實就是 Object.create(null)，Object.create 用來建立一個新物件，strats 預設是呼叫 Object.create(null) 生成的空物件。

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

如果 strats[key] 為假，這裡會用 || 做穿透賦值，將 defaultStrat 預設函式賦值給 strat。

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

defaultStrat 函式返回一個三元表示式，如果 childVal 為 undefined，返回 parentVal，否則返回 childVal，這裡主要以 childVal 優先，這也是為什麼有 component > mixins > extends 這樣的優先順序。

mergeField 函式最後會將呼叫 strat 的結果賦值給 options[key]。

mergeOptions 函式最後會 merge 所有 options、 mixins、 extends，並將 options 物件返回，然後再去例項化 vue。

鉤子函式的合併

我們來看看鉤子函式是怎麼進行合併的。

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
})

迴圈 LIFECYCLE_HOOKS 陣列，不斷呼叫 mergeHook 函式，將返回值賦值給 strats[hook]。

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

LIFECYCLE_HOOKS 就是申明的 vue 所有的鉤子函式字串。

mergeHook 函式會返回 3 層巢狀的三元表示式。

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

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

第二層，如果 parentVal 為真，返回 parentVal 和 childVal 合併後的陣列，如果 parentVal 為假，返回第三層三元表示式。

第三層，如果 childVal 是陣列，返回 childVal，否則將 childVal 包裝成陣列返回。

new Vue({
  created: [
    function() {
      console.log('沖沖衝！')
    },function() {
      console.log('鴨鴨鴨！')
    }
  ]
})
// => 沖沖衝！
// => 鴨鴨鴨！

專案實踐

使用 vue 的小夥伴們，當然也少不了在專案中使用 element-ui。比如使用 Table 表格的時候，免不了申明 tableData、total、pageSize 一些 Table 表格、Pagination 分頁需要的引數。

我們可以將重複的 data、methods 寫在一個 tableMixin 中。

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

當我們需要使用時直接引入即可：

import tableMixin from './tableMixin'

export default {
  ...
  mixins: [tableMixin],methods: {
    searchData() {
      ...
    }
  }
}

我們在元件內會重新申明 searchData 方法。類似這種 methods 物件形式的 key，如果 key 相同，元件內的 key 會覆蓋 tableMixin 中的 key。

當然我們也可以在 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
        })
       ZexvKaJwXE .catch(error => {
          this.loading = false
        })
    }
  }
}

引入 axiosMixin：

import axiosMixin from './axiosMixin'

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

在 axios 中，我們可以預先處理 axios 的 success、error 的後續呼叫，是不是少寫了很多程式碼。

extend

順便講一下 extend，與 mixins 相似，只能傳入一個 options 物件，並且 mixins 的優先順序比較高，會覆蓋 extend 同名 key 值。

// 如果有 child.extends 遞迴呼叫 mergeOptions 實現屬性拷貝
const extendsFrom = child.extends
if (extendsFrom) {
  parent = mergeOptions(parent,vm)
}
// 如果有 child.mixins 遞迴呼叫 mergeOptions 實現屬性拷貝
if (child.mixins) {
  for (let i = 0程式設計客棧,vm)
  }
}

// 如果有 child.extends 遞迴呼叫 mergeOptions 實現屬性拷貝
const extendsFrom = child.extends
if (extendsFrom) {
  parent = mergeOptions(parent,vm)
}
// 如果有 child.mixins 遞迴呼叫 mergeOptions 實現屬性拷貝
if (child.mixins) {
  for (let i = 0,vm)
  }
}

在 mergeOptions 函式中，會先對 extends 進行屬性拷貝，然後再對 mixin 進行拷貝，在呼叫 mergeField 函式的時候會優先取 child 的 key。

雖然 extends 的同名 key 會被 mixins 的覆蓋，但是 extends 是優先執行的。

總結

注意一下 vue 中 mixins 的優先順序，component > mixins > extends。

我們暫且將 mixins 稱作是元件模組化，靈活運用元件模組化，可以將元件內的重複程式碼提取出來，實現程式碼複用，也使我們的程式碼更加清晰，效率也大大提高。

當然，mixins 還有更加神奇的操作等你去探索。

以上就是vue使用mixins優化元件的詳細內容，更多關於vue 用mixins優化元件的資料請關注我們其它相關文章！