这篇文章主要介绍了vue 中 extend 、component 、mixins 、extends 的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
new vue()、component
首先我们来约定一个选项对象 baseoptions,后面的代码会用到.
let options = { template: '<p>{{firstname}} {{lastname}} aka {{alias}}</p>', data: function () { return { firstname: 'walter', lastname: 'white', alias: 'heisenberg' } }, created(){ console.log('oncreated-1'); }};
new vue() source:vue/src/core/instance/index.js
实例化一个组件.
new vue(baseoptions);// -> oncreated-1component source:vue/src/core/global-api/assets.js
vue.component 是用来注册或获取全局组件的方法，其作用是将通过 vue.extend 生成的扩展实例构造器注册（命名）为一个组件.全局注册的组件可以在所有晚于该组件注册语句构造的vue实例中使用.
vue.component('global-component', vue.extend(baseoptions));//传入一个选项对象（自动调用 vue.extend）,等价于上行代码.vue.component('global-component', baseoptions);// 获取注册的组件（始终返回构造器）var mycomponent = vue.component('my-component')
当我们需要在其他页面‘扩展'或者叫‘混合'baseoptions时,vue中提供了多种的实现方式:extend,mixins,extends.
extend source:vue/src/core/global-api/extend.js
可以扩展 vue 构造器，从而用预定义选项创建可复用的组件构造器。
let basecomponent = vue.extend(baseoptions);//基于基础组件basecomponent,再扩展新逻辑.new basecomponent({ created(){ //do something console.log('oncreated-2'); } //其他自定义逻辑});// -> oncreated-1// -> oncreated-2
mixins
mixins 选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 vue.extend() 里最终选择使用相同的选项合并逻辑合并。
new vue({ mixins: [baseoptions], created(){ //do something console.log('oncreated-2'); } //其他自定义逻辑});// -> oncreated-1// -> oncreated-2
extends
这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级.
官方文档是这么写的,除了优先级,可能就剩下接受参数的类型吧,mixins接受的是数组.
new vue({ extends: baseoptions, created(){ //do something console.log('oncreated-2'); } //其他自定义逻辑});// -> oncreated-1// -> oncreated-2
从结果上看,三种方式都能实现需求,但是形式却有不同.
vue.extend
vue.extend只是创建一个构造器,他是为了创建可复用的组件.
mixins,extends
而mixins和extends是为了拓展组件.
从源码来看通过extend,extends和mixins三种方式接收的options,最终都是通过mergeoptions进行合并的.差异只是官方文档中提到的优先级不同extend > extends > mixins. 所以,如果是简单的扩展组件功能,三个方式都可以达到目的.
而这三种方式使用场景上细化的区分,目前我也蒙圈中...
//几种方式的不同示例:
https://jsfiddle.net/willnewi...
选项对象合并策略 vue.config.optionmergestrategies
上面提到的选项对象,是在mergeoptions中按照一定策略进行合并的.
打印vue.config.optionmergestrategies,你会看默认的optionmergestrategies如下:
mergehook
子组件和父组件的生命周期事件会合并在一个数组里。父组件在前，子组件在后。
watch
子组件和父组件的watchers会合并在一个数组里。父组件在前，子组件在后。
mergeassets(filters，components，directives)
首先会在子组件里查找，如果没有，才会沿着原型链向上，找父组件中对应的属性。
data 合并规则
无重复的属性保留
同名覆盖
data中的对象也是相同规则,无重复的属性保留,同名覆盖
props、methods、computed: 无重复保留,同名子组件覆盖父组件
mergeassets
mergeassets合并方法里,用到了原型委托.他会先把父组件的属性放在创建的新对象的原型链上.然后扩展新对象
对象里查找属性的规则 :举个例子，当查找一个属性时，如 obj[a] ,如果 obj 没有 a 这个属性，那么将会在 obj 对象的原型里找，如果还没有，在原型的原型上找，直到原型链的尽头，如果还没有找到，返回 undefined。
function extend (to, _from) { for (var key in _from) { to[key] = _from[key]; } return to}function mergeassets (parentval, childval) { var res = object.create(parentval || null); return childval ? extend(res, childval) : res}
总结
vue.component 注册全局组件,为了方便
vue.extend 创建组件的构造函数,为了复用
mixins、extends 为了扩展
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用axios如何实现上传图片带有进度条功能
在javascript中如何实现json数据分组优化
在vue中关于this指向问题（详细教程）
以上就是在vue中extend 、component有哪些区别？的详细内容。