Vue.js可複用性 & 組合

林暉發表於2019-03-04
Vue.js

混入（mixins）

在實際的應用中，有很多的業務程式碼是可以重複使用的，vue.js本身是一個注重於高效率的框架，所以也提供了元件中的複用功能。混入 (mixins) 是一種分發 Vue元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。如下：


// 定義一個混入物件
var mixinTest = {
  created: function () {
    this.mixinMethod()
  },
  methods: {
    mixinMethod: function () {
      console.log(`mixinMethod from mixin!`)
    }
  }
}

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

var component = new Component() // => "hello from mixin!"
複製程式碼

元件和混入物件含有同名選項時

從中可以發現當元件混入物件時，物件的方法以及鉤子都被混入了該元件的本身。這種方式是很靈活的。那要是元件和混入物件含有同名選項時，也是有規則的，比如，當資料上和元件有同名時，以元件的資料為先。


var mixin = {
  data: function () {
    return {
      testA: `aaaa`,
      testB: `bbbb`
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      testA: `AAAA`,
      testC: `CCCC`
    }
  },
  created: function () {
    console.log(this.$data)
    // => { testA: "AAAA", testB: "bbbb", testC: "CCCC" }
  }
})
複製程式碼

mixins物件裡的testA和testB混入到了元件中的data中，同時出現了testA與元件同名，所以優先保留了元件的資料。

混入物件與元件具有同名鉤子函式時


var mixin = {
  created: function () {
    console.log(`混入物件的鉤子`)
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log(`元件的鉤子`)
  }
})

// => "混入物件的鉤子"
// => "元件的鉤子"
複製程式碼

可以發現混入物件的鉤子和元件的鉤子都會執行，但是會先執行混入物件的鉤子

值為物件的選項時，例如：methods，components等的時候


var mixin = {
  methods: {
    mixinsMethod: function () {
      console.log(`mixinsMethod`)
    },
    sameMethod: function () {
      console.log(`from mixin`)
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    selfMethod: function () {
      console.log(`selfMethod`)
    },
    sameMethod: function () {
      console.log(`from self`)
    }
  }
})

vm.mixinsMethod() // => "mixinsMethod"
vm.selfMethod() // => "selfMethod"
vm.sameMethod() // => "from self"
複製程式碼

由上可得，在值為物件的混入物件混入時，這些將和元件原有的選項混合一起成為一個物件，當物件的鍵名與元件的鍵名出現重複時，會使用元件的鍵名。

全域性混入

以上列舉的都是單獨的引入到某一個元件中使用。也可以全域性註冊混入物件。這樣的話所有的例項就都會被混入的物件所作用。也可以根據自己需要做成一個具體的使用工具類。供全域性所有的例項使用。不過也要小心使用，畢竟會影響到所有的元件，需要結合實際場景使用。


Vue.mixin({
  created: function () {
    var option = this.$options.text
    if (option) {
      console.log(option)
    }
  }
})
new Vue({
  text: `globalMixins!`
})
// => "globalMixins!"
複製程式碼

相關文章