Vue 混入

发表于 更新于 分类于 Waline：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

首先粘贴一份官方教程以及我对这份教程的理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 定义一个混入对象
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!"

在这份示例代码中，首先定义了一个混入，该混入包括一个created以及一个method，然后在需要使用该段代码的组件中利用mixins将该混入导入，这样就可以在该组件中使用混入中的所有内容。

这一点其实有点像Java中的继承，混入就类似于父类，组件就相当于子类，组件中具有混入的所有行为，包括函数，生命周期，事件监听等，同时我们又可以在组件中重写混入中的内容。

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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" }
  }
})

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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"

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

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

extend/component/mixin/extends

还是一开始那个例子，不过为了不引起混淆，我们现在的对象名不叫做myMixin，改名叫做myOption。

new Vue（）和component

new Vue(myOption)：实际上就是实例化了一个component

而Vue.component则是用于注册或者获取全局component的方法，就是讲通过Vue.extend生成的扩展实例构造器注册为一个组件，该组件可以在所有晚于该组件注册的组件中使用，如：

1
2
3
4
5
Vue.component('global-component', Vue.extend(myOption));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component('global-component', myOption);
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('global-component')

extend

1
2
3
4
5
6
7
8
9
10
11
let MyComponent = Vue.extend(myOption);
//基于基础组件MyComponent,再扩展新逻辑.
new MyComponent({
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

mixins

合并的规则与extend相同

1
2
3
4
5
6
7
8
9
10
new Vue({
    mixins: [myOption],
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

extends

这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。同时extends接受的是一个对象而不是数组。

1
2
3
4
5
6
7
8
9
10
new Vue({
    extends: myOption,
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

优先级

extend > extends > mixins

参考文章：

https://segmentfault.com/a/1190000010095089