如何在Vue中更好的复用组件

前言

大多数前端框架都提供了组件化的能力，在日常开发中，我们经常会用组件去封装自己的业务逻辑，那么如何去写一个复用率高的组件就变成了一个重要的技巧。这里总结一下在使用Vue时几种复用组件的方式。

场景

表单验证是一个经常碰到的场景，表单内的不同组件常常需要有相同的验证逻辑，比如验证值非空，这里就按照这个场景来举几个例子。

使用Mixin

Vue提供了 “混入” 这个方案来达到一个复用的效果，所以我们可以写一个表单校验相关的mixin，并且混入到各个组件中去。

// validate-mixin.js
const validateMixin = {
    props: {
        required: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        validate(value) {
            if (this.required && (value === undefined || value === null || value === '')) {
                this.isError = true;
            } else {
                this.isError = false;
            }
        }
    }
};
export default validateMixin

然后我这边有两个组件，分别是文本输入框和数字输入框

// input.js

// number-input.js

混入的优点在于使用简单，将共同的属性或者方法封装在这个mixin对象之中，其他需要共享该属性或者方法的组件只要引入这个mixin即可。
但是从上述代码中可以看出，混入有几个明显的缺点。

1. 模板的内容需要维护在各个组件当中,得不到复用。
2. 属性和方法放在mixin中，后期不方便他人维护，需要手动梳理源组件和混入对象之间的逻辑。
3. mixins会导致属性冲突，并且相同名称的生命周期会被合并，这可能带来冗余的逻辑，同时也可以看出mixin的侵入性较强。

实际上在开发过程中，如何组织mixin的目录结构也是个问题，要区分是一个页面级别的mixin，还是部分页面的mixin，甚至是全站的mixin，划分不清楚会导致后期mixin的职能混乱，不利于代码维护。

RenderLess

renderLess 本意就是不渲染内容的组件，在Vue 中我们可以使用插槽来实现，和React中的HOC有异曲同工之妙。

// validate-render-less.vue

上面这个模块本质上是一个vue组件，他有模板，有逻辑，并且利用插槽在模板中预留了一个“占位符”，其他组件可以往这里添加自己的内容。

// input.js

// number-input.js

使用render-less组件有这么几个优点。

1. 可以复用模板的逻辑，公共的部分都可以提取到renderless中
2. 不会出现命名冲突

简单总结

对于简单的场景，mixin可以解决大部分问题，但是要注意他的一些缺点；其他的场景下，如果需要复用模板，并且组件的逻辑较为复杂，那应该优先考虑使用render-less组件