快捷導(dǎo)航

Vue中mixins混入的介紹和使用詳解

更新時(shí)間：2023年08月16日 11:08:02 作者：阿鎮(zhèn)吃橙子

mixins（混入）是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下

當(dāng)項(xiàng)目越來越大，項(xiàng)目中組件之間可能會(huì)存在一些相似的功能，這就導(dǎo)致了在各個(gè)組件中需要編寫功能相同的代碼段，重復(fù)地定義這些相同的屬性和方法，導(dǎo)致代碼地冗余，還不利于后期代碼的維護(hù)。

一、什么是Mixins

mixins（混入）：一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins 是一個(gè) js 對(duì)象，它可以包含我們組件script中的任意功能選項(xiàng)，如：data、components、methods、created、computed 等等。我們只要將公用的功能以對(duì)象的方式傳入 mixins 選項(xiàng)中，當(dāng)組件使用 mixins 對(duì)象，所有 mixins 對(duì)象的選項(xiàng)都將被擴(kuò)展到該組件本身的選項(xiàng)中來，這樣就可以提高代碼的重用性，并易于后期的代碼維護(hù)。

二、何時(shí)使用Mixins

當(dāng)存在多個(gè)組件中的數(shù)據(jù)或者功能很相近時(shí)，我們就可以利用 mixins 將公共部分提取出來，通過 mixins 封裝函數(shù)。

三、如何創(chuàng)建Mixins

src 目錄下創(chuàng)建一個(gè) mixins 文件夾，在文件夾下新建一個(gè) myMixins.js 文件。因?yàn)?mixins 是一個(gè) js 對(duì)象，所以應(yīng)該以對(duì)象的形式來定義 myMixins。在對(duì)象中可以和 vue 組件一樣來定義 data、components、methods、created、computed 等屬性，并通過 export 導(dǎo)出該對(duì)象。

四、如何使用Mixins

在需要調(diào)用的組件中引入 myMixins.js 文件，然后在 export default 中引入需要的對(duì)象即可。

五、Mixins的主要特性

1.方法和參數(shù)在不同的組件中不共享

當(dāng)某一個(gè)組件調(diào)用了 mixins 并將其屬性合并到自己組件中，其屬性只會(huì)被當(dāng)前這個(gè)組件所識(shí)別，也就是說其他組件無法從當(dāng)前組件中獲取到 mixins 中的數(shù)據(jù)和方法，做到了很好的數(shù)據(jù)隔離效果。如下所示：

// 在 myMixins.js 中定義一個(gè) age 字段和 getAge 方法,用來獲取年齡信息
export const myMixins = {
  data() {
    return {
      age: 18,
    }
  },
  mounted() {
    this.getAge()
  },
  methods: {
    getAge() {
      console.log(this.age)
    }
  }
}

// 在第一個(gè)組件中引入 mixins，并且對(duì) age 加1 
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    this.age++
  },
}
// 發(fā)現(xiàn)控制臺(tái)輸出 19，說明當(dāng)前組件的 age 變化了

// 在第二個(gè)組件中引入 mixins，但是不做任何處理
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
}
// 發(fā)現(xiàn)控制臺(tái)輸出 18，說明當(dāng)前組件的 age 無影響

2.Mixins 合并沖突

當(dāng) mixins 的值為對(duì)象(components、methods 、computed、data)，混入到某個(gè)組件中時(shí)，選項(xiàng)會(huì)被合并。當(dāng)對(duì)象名稱沖突時(shí)優(yōu)先組件，組件中的值會(huì)覆蓋混入對(duì)象的。

// 混入myMixins.js對(duì)象中增加age屬性、getAge1方法、getAge2方法
export const myMixins = {
  components:{},
  data() {
    return {
      age: 18,
    }
  },
  methods: {
    getAge1() {
      console.log("age1 from mixins", this.age )
    },
    getAge2() {
      console.log("age2 from mixins", this.age )
    },
  }
}

// 組件中自帶age屬性、getAge1方法、getAge3方法；同時(shí)引入 mixins。
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {
      age: 20,
    }
  },
  mounted() {
    this.getAge1();
    this.getAge2();
    this.getAge3();
  },
  methods: {
    getAge1() {
      console.log('age1 from template', this.age)
    },
    getAge3() {
      console.log('age3 from template', this.age)
    },
  }
}
// 輸出控制臺(tái)發(fā)現(xiàn)，組件中的age覆蓋了混合對(duì)象的age，組件的getAge1方法覆蓋了混合對(duì)象的getAge1方法
// age1 from template 20
// age2 from mixins 20
// age3 from template 20

當(dāng)值為函數(shù)(created、mounted)的選項(xiàng)，混入到組件中時(shí)，選項(xiàng)會(huì)被合并調(diào)用，混合對(duì)象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用。

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {}
  },
  created() {
    console.log('data from mixins')
  }
}
// 組件中引入 mixins
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('data from template')
  }
}
// 先輸出混入對(duì)象的值，再輸入組件的值
// data from mixins
// data from template

六、mixins 中有異步請(qǐng)求的情況

當(dāng)混入里面包含異步請(qǐng)求函數(shù)，而我們又需要在組件中使用異步請(qǐng)求函數(shù)的返回值時(shí)，我們會(huì)取不到此返回值，解決方案是：不要返回結(jié)果，而是直接返回異步函數(shù)

// myMixins.js 中直接返回異步函數(shù)
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
   async getDate1() {
      let result = await new Promise((resolve,reject) => {
          let a = 1;
          setTimeout(() => {
            resolve(1)
          },500)
       })
       return result
    },
  }
}
// 組件中獲取混入的異步函數(shù)，通過then 方法獲取函數(shù)值。
import { myMixins } from "./myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    this.getDate1().then(res => {
      console.log(res)
    })
  }
}