vue里extend、mixins、extends的区别

1.extend

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

// 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')

2.mixins

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。 Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

// mixins示例 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修改

3.extends

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

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

4.总结：

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

转载于:https://www.cnblogs.com/Juliana1992/p/10332976.html

相关资源：JAVA上百实例源码以及开源项目