vue使用mixins優(yōu)化組件

更新時間：2021年04月29日 10:01:49 作者：張小手

這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下

如何理解 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)用，當 data、methods 對象鍵值沖突時，以組件優(yōu)先。

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

mixins 實現(xiàn)

那 mixins 是如何實現(xiàn)的呢？當 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) {
    // 穿透賦值，默認為 defaultStrat
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

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

const extendsFrom = child.extends
if (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 變量。

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

const options = {}
let key

for (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ù)，這樣避免了重復調(diào)用。

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

function mergeField(key) {
  // 穿透賦值，默認為 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 默認是調(diào)用 Object.create(null) 生成的空對象。

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

如果 strats[key] 為假，這里會用 || 做穿透賦值，將 defaultStrat 默認函數(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ù)的合并

我們來看看鉤子函數(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 的小伙伴們，當然也少不了在項目中使用 element-ui。比如使用 Table 表格的時候，免不了申明 tableData、total、pageSize 一些 Table 表格、Pagination 分頁需要的參數(shù)。

我們可以將重復的 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() {
      ...
    }
  }
}

我們在組件內(nèi)會重新申明 searchData 方法。類似這種 methods 對象形式的 key，如果 key 相同，組件內(nèi)的 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
        })
        .catch(error => {
          this.loading = false
        })
    }
  }
}

引入 axiosMixin：

import axiosMixin from './axiosMixin'

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

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

extend

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

// 如果有 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)
  }
}

// 如果有 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)
  }
}

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

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

總結(jié)

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

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

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

以上就是vue使用mixins優(yōu)化組件的詳細內(nèi)容，更多關于vue 用mixins優(yōu)化組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

vue
mixins

Vue前端表格導出Excel文件的圖文教程
我們在開發(fā)的時候會經(jīng)常用的導出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關于Vue前端表格導出Excel文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
vue中使用gojs/jointjs的示例代碼
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
vue backtop組件的實現(xiàn)完整代碼
這篇文章主要介紹了vue backtop組件的實現(xiàn)完整代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
VUEJS實戰(zhàn)之構(gòu)建基礎并渲染出列表（1）
這篇文章主要為大家詳細介紹了VUEJS實戰(zhàn)之構(gòu)建基礎并渲染出列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Bpmn.js?自定義描述文件使用說明
這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
vue-autoui自匹配webapi的UI控件的實現(xiàn)
這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
vue實現(xiàn)循環(huán)切換動畫
這篇文章主要為大家詳細介紹了vue實現(xiàn)循環(huán)切換動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
vue+iview+less+echarts實戰(zhàn)項目總結(jié)
本篇文章是作者通過學習vue+iview+less+echarts制作一個小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學習參考。
2018-02-02
Vue中通過屬性綁定為元素綁定style行內(nèi)樣式的實例代碼
這篇文章主要介紹了Vue中通過屬性綁定為元素綁定style行內(nèi)樣式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04