vue 对象继承_对VUE组件继承的思考

每个VUE的单文件组件都是一个对象，当多个对象相似时会造成代码的重复。由于面向对象编程思想，我们首先会想到继承，接下来我们探究一下VUE的单文件组件之间的继承。

新近开始了一个项目，用VUE实现组件化大屏设计。大概需求是：让用户可以使用拖拽的方式去设计一个自己想要的大屏展示界面。

这个需求要求大屏的每一个元素都是一个可拖拽添加到画布上的组件，并且组件之间可以任意的互相传递数据进行条件筛选。也就是说，每个组件都包含拖拽相关的方法、初始化之后的位置移动方法以及对外提供筛选条件的方法等。如果正常的组件使用方法，会造成大量代码重复，不利于维护。首先想到的是利用面向对象之继承来避免代码重复，在vue官网上发现vue也提供了extends和mixins的方法来实现组件之间的继承/混入。

根据官网介绍，extends和mixins的选项合并逻辑相同。

官网原文：

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子**之前**调用。

值为对象的选项，例如`methods`、`components`和`directives`，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

总结来说，VUE合并逻辑将选项分为三类，data、钩子函数、值为对象的选项

data：递归合并，如有冲突，组件数据优先；

钩子函数都会调用，组件自身钩子后执行；

值为对象的选项，只会进行第一层合并，如有冲突，组件数据优先。

本着只有自己实现过才有发言权的原则，自己用代码验证了一遍，下面把测试代码拿出来。

子组件

Children1

import Base from "./Base";

export default {

name: "Children1",

extends: Base,

data() {

return {

// render: 'Children1 Render'

aa: 'Children1 Render'

};

},

beforeCreate() {

console.log("==============Children1 beforeCreate start==================");

console.log(this.render);

console.log("==============Children1 beforeCreate end==================");

},

created() {

console.log("==============Children1 created start==========&#