Vue中的Mixin

Vue中的Mixin

一、總結

一句話總結：

VUE中的【混入 (mixin) 】提供了一種非常靈活的方式，來分發 Vue 元件中的【可複用功能】。一個混入對象可以包含任意元件選項。當元件使用混入對象時，所有混入對象的選項将【被“混合”進入】該【元件】本身的選項。

1、VUE中的【混入 (mixin) 】的【沖突解決】？

【元件優先，而不是mixin】：值為對象的選項，例如 methods、components 和 directives，将被合并為同一個對象。兩個對象鍵名沖突時，取元件對象的鍵值對。

【vue的mixin沖突解決執行個體】：可以看到下面執行個體中，沖突項的取值就是取的元件中的，【vm.conflicting() // => "from self"】

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"      

2、VUE中的【混入 (mixin) 】的鈎子調用情況？

【都調用，混入對象的鈎子先】：VUE中的混入 (mixin) 的【同名鈎子函數】将合并為一個【數組】，是以【都将被調用】。另外，混入對象的鈎子将在元件自身鈎子之前調用。

var mixin = {
  created: function () {
    console.log('混入對象的鈎子被調用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('元件鈎子被調用')
  }
})

// => "混入對象的鈎子被調用"
// => "元件鈎子被調用"      

二、Vue中的Mixin

1、官網中的解釋

混入 — Vue.js

https://cn.vuejs.org/v2/guide/mixins.html

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入對象可以包含任意元件選項。當元件使用混入對象時，所有混入對象的選項将被“混合”進入該元件本身的選項。

// 定義一個混入對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定義一個使用混入對象的元件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"      

2、其它部落格中的說法

Vue 中mixin 的用法詳解

　　vue中提供了一種混合機制--mixins，用來更高效的實作元件内容的複用。最開始我一度認為這個群組件好像沒啥差別。。後來發現錯了。下面我們來看看mixins和普通情況下引入元件有什麼差別？

     元件在引用之後相當于在父元件内開辟了一塊單獨的空間，來根據父元件props過來的值進行相應的操作，單本質上兩者還是泾渭分明，相對獨立。

     而mixins則是在引入元件之後，則是将元件内部的内容如data等方法、method等屬性與父元件相應内容進行合并。相當于在引入後，父元件的各種屬性方法都被擴充了。

     單純元件引用：

          父元件 + 子元件 >>> 父元件 + 子元件

     mixins：

          父元件 + 子元件 >>> new父元件

作用：多個元件可以共享資料和方法，在使用mixin的元件中引入後，mixin中的方法和屬性也就并入到該元件中，可以直接使用。鈎子函數會兩個都被調用，mixin中的鈎子首先執行。

下面給大家介紹vue mixin的用法，具體介紹如下所示：

1.定義一個 js 檔案(mixin.js)

1 2 3 4 5 6 7 8 9 10 11 12

​ ​export ​ ​​ ​default​ ​ ​ ​{​ ​data() {​ ​return​ ​{​ ​name: ​ ​'mixin'​ ​}​ ​},​ ​created() {​ ​console.log(​ ​'mixin...'​ ​, ​ ​this​ ​.name);​ ​},​ ​mounted() {},​ ​methods: {}​ ​}​

關于用法，vue文檔中有詳細的介紹，這裡隻介紹怎麼在一個vue檔案中使用mixin。

2.在vue檔案中使用mixin

​import ​ ​'@/mixin'​ ​; ​ ​// 引入mixin檔案​ ​export ​ ​default​ ​{​ ​mixins: [mixin]​ ​}​

接下來記錄一下我在項目中使用mixin的具體例子:

首先我們來看一下項目中的需求：

大家從圖可以看出來，有兩個子產品的内容差不多一樣，但又有差別。有些人會說既然都差不多為什麼不抽出來直接整成一個公共元件呢？不是不可以，但為了以後的維護，萬一産品整了個一個子產品單獨有的呢？這樣不友善以後的代碼維護。是以我使用了mixin。還有一點，背景提供的接口最好是同一個根據不同的類型去拿不同子產品的資料，這樣友善簡單，下面貼代碼：

1.mixin檔案中：

2.元件中：