VUE混入深刻了解

@

目錄

• 前言
  • 基礎
  • 選項合併
  • 全局混入
• 總結

---

前言

VUE的混合概念是我以前未曾瞭解的，這此刷一遍文檔，來了解一下，感受仍是一個頗有趣的概念。

---

基礎

混入 (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!"

選項合併

當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行「合併」。

好比，數據對象在內部會進行遞歸合併，並在發生衝突時以組件數據優先。

同名鉤子函數將合併爲一個數組，所以都將被調用。另外，混入對象的鉤子將在組件自身鉤子以前調用。

值爲對象的選項，例如 methods、components 和 directives，將被合併爲同一個對象。兩個對象鍵名衝突時，取組件對象的鍵值對。

---

例子：

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

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

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

// => "混入對象的鉤子被調用"
// => "組件鉤子被調用"

注意：Vue.extend() 也使用一樣的策略進行合併。

全局混入

混入也能夠進行全局註冊。使用時格外當心！一旦使用全局混入，它將影響每個以後建立的 Vue 實例。使用恰當時，這能夠用來爲自定義選項注入處理邏輯。

// 爲自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

---

總結

vue混合的使用特性並非不少，最後有一個自定義來進行選項的混合有點複雜，就沒有再本文種寫了，之後對混合的使用須要注意以及，特別的留意一下!