关于VUE组件继承的思考

.aa{color:red;}每个VUE单文件组件都是一个对象，当多个对象相似时，会造成代码重复。由于面向对象编程的思想，我们首先会想到继承，接下来我们将探讨VUE单文件组件之间的继承。最近开始做一个项目，用VUE实现组件化大屏设计。总的要求是：允许用户通过拖放的方式设计出自己想要的大屏显示界面。这个需求要求大屏的每个元素都是一个可以拖拽添加到画布上的组件，并且组件之间可以任意传递数据进行条件过滤。也就是说，每个组件都包含了拖拽相关的方法，初始化后的位置移动方法，以及提供外部过滤条件的方法等。如果正常使用该组件，会造成大量的代码重复，即不利于维护。首先想到的是使用面向对象的继承来避免代码重复。在vue官网上发现vue也提供了extends和mixins的方法来实现组件之间的继承/混合。根据官网介绍，extends和mixins的选项合并逻辑是一样的。官网原文：内部会递归合并数据对象，发生冲突时组件数据优先。同名的钩子函数会合并到一个数组中，所以都会被调用。此外，mixin对象的挂钩将在组件自己的挂钩之前被调用。值为对象的选项，例如`methods`、`components`和`directives`，将被合并到同一个对象中。当两个对象的键名冲突时，取组件对象的键值对。综上所述，VUE合并逻辑将选项分为三类，数据、钩子函数、值为对象的选项。对象的选项只会在第一级合并。如果有冲突，组件数据将优先。本着只有实现了的人才有发言权的原则，我自己用代码验证了一下，下面把测试代码拿出来。子组件.aa{color:red;}父组件.aa{颜色：黄色；font-size:24px;}经过验证，官网介绍是对的（当然人家自己写肯定是对的O(∩_∩)O~)，但是还有一个问题，组件中不仅有js，还有html和css，那它们的逻辑是什么？官网没说，没关系，大家可以自己验证一下：css是根据selector合并覆盖；组件对象中找不到html，目前认为是父组件中的template标签在继承过程中（笔者在此不确定，如有知道确切结果的欢迎指教）.综上，得到继承的5点合并原则：数据：递归合并，如果有冲突，组件数据优先；将调用钩子函数，钩子后将执行组件本身；如果该值为对象选项，则只会执行第一层合并。如果有冲突，组件数据优先；css根据选择器合并覆盖；父组件中的模板标签在继承过程中被丢弃。