欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Vue 中 extend 、component 、mixins 、extends 的区别

程序员文章站 2022-04-18 21:41:27
new vue()、component 首先我们来约定一个选项对象 baseoptions,后面的代码会用到. let options = { templa...

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 、mixins 、extends 的区别

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

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

...

选项对象合并策略 vue.config.optionmergestrategies

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

打印vue.config.optionmergestrategies,你会看默认的optionmergestrategies如下:

详解Vue 中 extend 、component 、mixins 、extends 的区别

  • 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 为了扩展

如果按照优先级去理解,当你需要继承一个组件时,可以使用vue.extend().当你需要扩展组件功能的时候,可以使用extends,mixins.但目前为止还没有碰到完美诠释他们的场景,抱歉,能力有限????