Vue 中 extend / component / mixins / extends 的区别

Kylin_Mountain 发布于2019-08-20 17:50 / 412人阅读

摘要：父组件在前，子组件在后。，，首先会在子组件里查找，如果没有，才会沿着原型链向上，找父组件中对应的属性。

在segmentfault上看到了一个问题vue.extend, vue.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-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 为了扩展

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

参考

Vue 代码详解

Vue官方文档梳理-全局配置合并策略

vue2.0源码解读之选项合并策略 optionMergeStrategies

vue源码解读－component机制

Tips

href 属性用于保持光标形状为正常的手形，也可以使用 css 实现

FOUC Flash Of Unstyled Content 文档样式闪烁

专线服务服务器托管 extend() Extending extendible extends

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83912.html

vue中extend，mixins，extends，components,install的几个操作

摘要：前言你知道，用法吗你知道他们的区别吗你知道他们的执行顺序嘛下面都能找到这些答案使用构造器创建一个子类参数是包含组件选项的对象是全局的创建构造器实例传入的数据为对应的标签最外层必须只有一个标签这是扩展的数据创建实例，并挂载到一个元素上。前言你知道extend,mixins,extends，components,install用法吗? 你知道他们的区别吗?你知道他们的执行顺序嘛? 下面...

沈俭 2019-08-22 18:39 评论0 收藏0
vue中extend，mixins，extends，components,install的几个操作

摘要：前言你知道，用法吗你知道他们的区别吗你知道他们的执行顺序嘛下面都能找到这些答案使用构造器创建一个子类参数是包含组件选项的对象是全局的创建构造器实例传入的数据为对应的标签最外层必须只有一个标签这是扩展的数据创建实例，并挂载到一个元素上。前言你知道extend,mixins,extends，components,install用法吗? 你知道他们的区别吗?你知道他们的执行顺序嘛? 下面...

beita 2019-08-02 10:53 评论0 收藏0
面试被问到Vue?想进一步提升?那就停下来看一下吧

摘要：两个对象键名冲突时，取组件对象的键值对。允许声明扩展另一个组件可以是一个简单的选项对象或构造函数，而无需使用。这主要是为了便于扩展单文件组件。 Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提到）有一个全面的了解，那么在...

andot 2019-08-26 14:05 评论0 收藏0
Vue with typescript

摘要：想要使用语法的话，配合，这个插件，体验更佳，这个插件在语法中实现了。这种方式最接近的单文件组件的写法，如果一个完善项目从改成，用这种方法很快，只要加上和一些必要的变量类型就好了，然后用包裹就好。不推荐混入用这种方式写，无法实现多继承。最近尝试了一下 TypeScript，试着把一个 Vue 项目改成了 TypeScript 的，感觉还不错目前 Vue 和 TypeScript 的配...

JerryWangSAP 2019-08-23 12:35 评论0 收藏0
在小程序中实现 Mixins 方案

摘要：明白了什么是以后，便可开始着手在小程序里面实现了。但是在小程序中，这套机制会和的有一点区别。代码实现在小程序中，每个页面都由函数定义，而则作用于这个函数当中的对象。函数即为小程序运行机制的具体实现，完全按照上一节总结的三条结论来进行。原文来自我的博客：https://jrainlau.github.io/#/... showImg(https://segmentfault.com/...

chunquedong 2019-08-23 18:12 评论0 收藏0