vue中 extend、mixins和extends的区别

发表于 更新于 分类于

介绍

  • extend：扩展组件的构造器，当我们调用 vue.component('a', {...}) 时自动调用
  • mixins：接收对象数组（可理解为多继承），可以混入多个 mixin
  • extends：接收的是对象或函数（可理解为单继承），extends 只能继承一个

extend

Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Vue.extend
// 创建构造器
var Profile = Vue.extend({
  template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
  data: function () {
    return {
      firstName: "Walter",
      lastName: "White",
      alias: "Heisenberg"
    };
  }
});
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mount-point");

mixins

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。

举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
var mixin = {
  created: function () {
    console.log(1);
  }
};
var vm = new Vue({
  created: function () {
    console.log(2);
  },
  mixins: [mixin]
});
// => 1
// => 2

mixins 要点

  • data 混入组件数据优先
  • 钩子函数将混合为一个数组，混入对象的钩子将在组件自身钩子之前调用
  • 值为对象的选项，例如 methods， components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
  • 以上合并策略可以通过 Vue.config.optionMergeStrategies 修改

extends

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。

1
2
3
4
5
6
7
var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

总结

  • extend 用于创建 vue 实例
  • mixins 可以混入多个 mixin，extends 只能继承一个
  • mixins 类似于面向切面的编程（AOP），extends 类似于面向对象的编程
  • 优先级 Vue.extend > extends > mixins