今天就跟大家聊聊有关extend与component在Vue 中有什么区别，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
目前
创新互联建站已为成百上千的企业提供了网站建设、域名、
雅安服务器托管、
网站托管、企业网站设计、
奈曼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
new Vue()、component
首先我们来约定一个选项对象 baseOptions,后面的代码会用到.
let options = {
template: '{{firstName}} {{lastName}} aka {{alias}}
',
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-1
component 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-2mixins
mixins 选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。
new Vue({
mixins: [baseOptions],
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2extends
这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级.
官方文档是这么写的,除了优先级,可能就剩下接受参数的类型吧,mixins接受的是数组.
new Vue({
extends: baseOptions,
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2从结果上看,三种方式都能实现需求,但是形式却有不同.
从源码来看通过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 为了扩展
看完上述内容，你们对extend与component在Vue 中有什么区别有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：extend与component在Vue中有什么区别-创新互联
分享网址：
http://cdkjz.cn/article/cscpcj.html
