如何在Vue 中管理 Mixins（搞懂這兩點就足夠了）

做者：Matt
譯者：前端小智
來源：medium

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

當咱們的Vue項目功能愈來愈多時，若是有相似的組件，可能會發現本身一次又一次地複製和粘貼相同的數據、方法和 watch。固然，咱們能夠將全部這些單獨的文件編寫爲一個單獨的組件，並使用 prop 來嘗試自定義它們，可是使用這麼多 props 很容易形成混亂且難懂。爲了不這個問題，大多數人只是繼續添加劇復的代碼，儘管本身感受應該有更好的解決方案。

值得慶幸的是，Vue 引入mixin來解決這類的老是，mixin是在不一樣組件之間共享可重用代碼的最簡單方法之一。Mixin 對象可使用任何組件選項如 data、mounted、created、update等，當組件使用 Mixin 時，Mixin 對象中的全部信息都將混合到組件中。而後，組件將有權訪問mixin中的全部選項，就像在組件自己中聲明的那樣。接着，咱們經過示例來幫助加深一下映像：

// mixin.js file
export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log('這裏由 mixin 中 create 方法打印！')
   },
   methods: {
      displayMessage: function () {
         console.log(‘這裏由 mixin 方法裏打印！’)
      }
   }
}

// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "這裏由 mixin 中 create 方法打印！"
// => {msg: ‘Hello World’}
// => "這裏由 mixin 方法裏打印！"

正如咱們所看到的，在使用mixin以後，該組件包含mixin中的全部數據，而且能夠經過使用this來訪問mxin中的數據和方法。咱們還可使用變量而不是單獨的文件來定義mixin。 坦白地說，這是咱們須要瞭解的大多數關於mixin的知識，可是我認爲了解某些用例和特殊狀況頗有用。

若是發生命名衝突該怎麼辦？

當mixin中的數據、方法或任何組件選項與組件中的選項具備相同的名稱時，可能會發生組件與其mixin之間的命名衝突。若是發生這種狀況，則組件自己的屬性將優先。例如，若是在組件和mixin中都有一個title數據變量。title將返回組件中定義的值，以下所示：

// mixin.js file
export default {
   data () {
      title: ‘Mixin’
   }
}
// -----------------------------------------------------------

// main.js file
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// => "Component"

總結

通常來講，對於Vue 的 mixin，咱們還有不少要了解，，可是上面這些知識在開發中通常足夠用了。若是你想了解更高級的主題，好比Vue中的全局mixin和自定義合併設置，能夠在 Vue文檔中找到這些信息。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://levelup.gitconnected....

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。