首页 / VUE / 在Vue中extend、component有哪些区别？

在Vue中extend、component有哪些区别？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在Vue中extend、component有哪些区别？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3912字，纯文字阅读大概需要6分钟。

内容图文

这篇文章主要介绍了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-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-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. 所以,如果是简单的扩展组件功能,三个方式都可以达到目的.

在Vue中extend、component有哪些区别？ - 文章图片

而这三种方式使用场景上细化的区分,目前我也蒙圈中...

//几种方式的不同示例:

https://jsfiddle.net/willnewi...

选项对象合并策略 Vue.config.optionMergeStrategies

上面提到的选项对象,是在mergeOptions中按照一定策略进行合并的.

打印Vue.config.optionMergeStrategies,你会看默认的optionMergeStrategies如下:

在Vue中extend、component有哪些区别？ - 文章图片

  • 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有哪些区别？的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在Vue中extend、component有哪些区别？全部内容，希望文章能够帮你解决在Vue中extend、component有哪些区别？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/286589.html

来源：【匿名】