[譯] 理解 Vue.js 中的 Mixins

• 原文地址：Understanding Mixins in Vue JS
• 原文做者：Nwose Lotanna
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：MacTavish Lee
• 校對者：Baddyo, jilanlan

本文是針對 Vue 中的 Mixins 的實用性介紹，探討了 Mixins 爲什麼重要，以及如何在工做流中使用。

什麼是 Mixins？

Vue JS 中的 Mixins 基本上是定義一大堆邏輯的地方，它們以 Vue 規定的特殊方式存儲，它們能夠反覆使用來爲 Vue 實例和組件添加功能。所以，Vue mixins 能夠在多個 Vue 組件之間共享，而不須要重複寫代碼塊。若是你以前用過 Sass 這個 CSS 預處理器，那麼你會對 mixins 有很好的理解。

寫在開始前

這篇文章更適合於使用 Vue JS 開發的中級前端工程師，所以你須要先熟悉基礎概念以及安裝過程。在開始使用 Vue CLI 3 以前，已經掌握了這些預備知識。

你須要：

• 安裝了 Node.js 10.x 或者更高的版本。你能夠在你的終端運行 node -v 來校驗你的版本。
• 已經安裝了 Node Package Manager 6.7 或者更高的版本（NPM）。
• 一個代碼編輯器：高度推薦 Visual Studio Code。 (推薦理由)
• 在你的設備上全局安裝了 Vue 的最新版本。
• 在你的設備上安裝了 Vue CLI 3.0。在安裝 3.0，先卸載舊版本的 CLI 工具：

npm uninstall -g vue-cli
複製代碼

以後安裝新的版本：

npm install -g @vue/cli
複製代碼

或者

• 在這裏下載一個 Vue 的啓動項目：

viclotana/vue-canvas: 一個通過優化、開箱即用的 Vue 應用、配備了默認的 Babel 和 ESlint 的配置

• 解壓下載的項目
• 進入到解壓後的文件以後運行下面的命令來保證全部的依賴都是最新的：

npm install
複製代碼

爲何 Mixins 是重要的

1. 使用 Vue mixins， 你能夠輕鬆地在編程中遵循 DRY 原則(譯者注: Don't Repeat Yourself)，它會確保你不會重複本身的代碼。
2. 使用 Vue mixins，你也能夠變得十分的靈活，一個 mixins 對象包含有 Vue 組件的選項，因此咱們能夠將 mixin 與 組件混合使用。
3. Vue mixins 也是很安全的，若是你的寫法恰當，那麼它們是不會對超出定義範圍的變動產生影響的。
4. 它們是很棒的代碼複用平臺。

Mixins 可以靈活地實現爲 Vue 組件分發可複用功能。 — 官方文檔

Mixins 幫助咱們解決了什麼問題

想要充分理解 Vue 中 mixins 的重要性，有一個方式：看看在實際開發中遇到的重用問題。若是你有兩個組件，兩者中各有一個目的一致或功能相同的方法，就像在下面這個簡單的示例中：

進入的你的項目文件夾以後到 src 文件夾建立一個名爲 components 的目錄，並在其中建立兩個組件：Test.vue 和 Modal.vue。複製下面的代碼到你的組件中。

// Component 1
// src/components/Test.vue
<template>
  <div>
    <button v-on:click="clicked('you just clicked on button  1')">
      Button 1
    </button>
  </div>
</template>;
export default {
  name: "Test",
  methods: {
    clicked(value) {
      alert(value);
    }
  }
};
複製代碼

上面的組件展現了一個按鈕，點擊它會彈出一個警告框。第二個組件會作確切相同的功能：

// Component 2
// src/components/Modal.vue
<template>
  <div>
    <button v-on:click="clicked('you just clicked on button  2')">
      Button 2
    </button>
  </div>
</template>;

export default {
  name: "Modal",
  methods: {
    clicked(value) {
      alert(value);
    }
  }
};
複製代碼

你的 App.vue 文件應該引入和聲明兩個組件，以下所示：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test />
    <modal />
  </div>
</template>;
<script>
import Test from "./components/Test.vue";
import Modal from "./components/Modal.vue";
export default {
  name: "app",
  components: {
    Test,
    Modal
  }
};
</script>
複製代碼

至此你能夠很清楚地看到，兩個組件中的點擊方法的代碼是重複的，而且不完美之處在於這樣會浪費內存資源，同時也違反了 DRY 的原則。

介紹 Vue Mixins

Vue 的團隊如今已經將 mixins 做爲這個問題的一個很是好的解決方案，經過 mixins 你能夠封裝一部分的代碼或者功能，而後你能夠在須要時將其引入各類組件。

Mixin 語法

從定義到使用 Vue Mixin 的方式以下：

// 定義一個 mixin 對象
var myMixin = {
  created: function() {
    this.hello();
  },
  methods: {
    hello: function() {
      console.log("hello from mixin!");
    }
  }
};
// 定義一個組件來使用這個 mixin
var Component = Vue.extend({
  mixins: [myMixin]
});
var component = new Component(); // => "hello from mixin!"
複製代碼

Demo

如今你能夠用 Vue mixins 重構上文中用來例證複用問題的兩個組件。在一個 Vue 應用中使用 mixins，要通過四個步驟：

• 撞見混入文件。
• 在須要的組件中引入 mixin 文件。
• 在組件中移除重複的邏輯。
• 註冊 mixin。

建立 mixin 文件

一個 mixin 文件是一個可導出的 JavaScript 文件，它內部定義了須要在所需的 Vue 組件中導入和重用的代碼塊和功能塊。對於像我這種很喜歡讓編程很是模塊化的開發者，能夠在 src 文件夾中建立一個 Mixins 文件夾以後在內部建立一個 clickMixin.js 文件。在新建立的文件中複製下面的代碼：

// src/mixins/clickMixin.js
export default {
  methods: {
    clicked(value) {
      alert(value);
    }
  }
};
複製代碼

這就是一個 mixin 文件，其中包含了實現彈出警告框的簡單的點擊方法。 它也能夠是任何邏輯，也能夠有數據選項，計算屬性和 Vue 組件能夠擁有的任何東西。它的可能性僅侷限於你的想象力和開發人員的用例。

在組件中導入 mixin 文件

如今一個 mixin 已經被建立了，下一步就是在須要它的組件 —— 須要彈出警告框功能的組件 —— 中注入它。在咱們上面的演示中，要插入 mixin 之處就是在文章開頭建立的兩個組件內部。用下面的代碼在兩個組件中引入 clickMixin。

import clickMixin from ‘../Mixins/clickMixin’
複製代碼

去除重複的邏輯

在引入了 mixin 後，你要移除即將被 mixin 替代的邏輯代碼。在咱們的例子中，這意味着你會在兩個組件中刪除方法的建立邏輯。

// 去掉這部分代碼塊以及它前面的逗號。

methods: {

 clicked(value){

  alert(value);

  }

}
複製代碼

註冊 mixin

這步操做就是你告訴 Vue 應用你要導入 mixin，它會將其中的邏輯視爲統一的並執行一些複雜的操做來保證應用的修復功能和方法在組件的適當位置調用。默認狀況下，Vue 中的 Mixins 會以數組的形式被註冊，以下所示：

<script>
import clickMixin from '../Mixins/clickMixin'
export default {
 name: 'Test',
 mixins: [clickMixin]
}
</script>
複製代碼

若是你從一開始就跟着我說的寫，那麼你的應用組件應該像下面這樣：

Test.vue

<template>
  <div>
    <button v-on:click="clicked('you just clicked on button 1')">
      Button 1
    </button>
  </div>
</template>;
<script>
import clickMixin from "../Mixins/clickMixin";
export default {
  name: "Test",
  mixins: [clickMixin]
};
</script>
複製代碼

Modal.vue

<template>
  <div>
    <button v-on:click="clicked('you just clicked on button 2')">
      Button 2
    </button>
  </div>
</template>;
<script>
import clickMixin from "../Mixins/clickMixin";
export default {
  name: "Modal",
  mixins: [clickMixin]
};
</script>
複製代碼

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Test msg="Welcome to Your Vue.js App" />
    <modal />
  </div>
</template>;
<script>
import Test from "./components/Test.vue";
import Modal from "./components/Modal.vue";
export default {
  name: "app",
  components: {
    Test,
    Modal
  }
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
button {
background-color: #10776e; /* Green */
border: none;
margin: 5px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>

複製代碼

Mixins 的類型

在 Vue 中 mixins 有兩種類型：

1. 局部 Mixins： 這就是咱們在這篇文章中所處理的類型。它的範圍僅侷限於導入和註冊的組件。局部 mixin 的影響範圍由引入它的組件所決定。
2. 全局 Mixins： 這是一種不一樣的 mixin，不管在任何 Vue 項目中，它是定義在 Main.js 文件中的。它會影響一個應用中的全部組件，因此 Vue 的開發團隊建議要謹慎使用。一個全局 mixin 的定義看起來就像這樣：

Vue.mixin({
  mounted() {
    console.log("hello world!");
  }
});

複製代碼

特別註明

在 Vue 應用中的事務層結構中，組件內部應默認優先應用 mixins。組件的應用順序次之，這樣它能夠在任意狀況下重寫覆蓋 mixin。所以務必謹記，當出現某種權限衝突時，Vue 組件擁有有最終的解釋和覆蓋權。

總結

經過一個簡單的示例，本文介紹了 Vue mixin 的概念、類型和使用方法。一樣重要的是要堅持使用局部 mixins，而且只在一些極少的必須用到的狀況下使用全局 mixins。編碼愉快！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。