Vue 灰度发布新功能的那些事

前言

什么是灰度发布？百度百科的解释如下。

灰度发布是指在黑与白之间，能够平滑过渡的一种发布方式。AB test就是一种灰度发布方式，让一部分用户继续用A，一部分用户开始用B，如果用户对B没有什么反对意见，那么逐步扩大范围，把所有用户都迁移到B上面来。灰度发布可以保证整体系统的稳定，在初始灰度的时候就可以发现、调整问题，以保证其影响度。

从上可以看出，灰度发布的主要作用有以下几点：

1. 降低直接全量发布带来的影响，让少部分用户先使用新版本，如发现问题则及时做好修复，验证无重大问题则全量发布新功能
2. 通过新老版本的数据对比，决定新版本是否需要全量发布

概述

灰度发布的方式有很多，按端可以区分服务端，客户端，Web前端都可以做，没有最好，只有更适合自己的业务场景。

如上可以看到常见的几种灰度发布的方式，都有各自的优缺点，由于我们公司有完善的大数据AB test方案，所以前端只需关注接口返回的字段标识，来做具体的页面加载逻辑，今天重点讲述在前端中使用Vue框架中如何做灰度发布。在Vue中主要可以分为以下两种情况：

组件级别：

1. 组件级别动态控制只需后端回传对应方案标识即可。

页面级别：

1. 前端页面访问地址不变，同后端人员约定好AB test 标记字段，前端根据字段返回不同的内容加载对应的页面。
2. 新旧功能区分两个页面地址，跳转页面地址由后端控制，此方案前端不需要太多改动，此文就不多说明。

先来看看日常处理的方式，一个页面可能会存在多个地方判断AB test 逻辑，或者是更多的AB test同时进行，这样的页面代码逻辑复杂度相对比较高，也不够整洁易懂，当有新的AB test加入或者有AB test需要决策的时候，修改代码的成本较高，降低了代码维护的效率。

<template>
    ...
    <test-a v-if="testA" />
    <test-b v-else-if="testB" />
    ...
    <div v-if="testA">
        ...
    </div>
    <div v-else-if="testB">
        ...
    </div>
    ...
</template>
<script>