使用vue-class-setup编写类风格的组合API，支持Vue2和Vue3

前言我司基于vue-class-component开发的项目有上百个，部署了近百个SSR服务，庞大在卷项目之初，我就幻想着要不要升级Vue3。经过一番研究，我发现vue-class-component支持Vue3。距离上一个版本已经发布两年了，现在还没有发布。正式版。目前基本处于无人维护状态，升级中有大量破坏性更新。对于以后是否继续使用Vue3我还是有所保留的，但是不妨碍我们把组件库做成Vue2和Vue3通用的，所以就有了这篇文章。三年来，vue-class-component最大的问题就是无法正确校验组件的参数传递和事件类型，给我带来了巨大的阴影。经过一番研究，惊喜地发现使用defineComponent定义的Components在Vue2.7和3.x中都能正确识别类型，所以先规划内部组件库，同时支持Vue2和Vue3，这样会容易很多以后继续用Vue3。于是，回到最开始，我调查了Vue3对vue-class-component的支持。最新的版本是8.0.0-rc.1，但是结果令人失望。它基本上没有维护，社区也没有支持。一个满足我的需求，同时支持Vue2和Vue3的。诞生思路鉴于vue-class-component组件目前无法进行正确的组件类型检查，当我惊喜地发现组合API编写的代码可以被正确识别时，就诞生了一种class风格来编写组合API。想法，于是花了一个月的时间练习，踩了所有的坑，终于诞生了vue-class-setup这个使用class风格写代码的库。gzip压缩后大小为1kb。快速启动npminstallvue-class-setup尝试了很多方案，最后采用了上面的形式作为最佳实践，不能直接导出一个默认类，必须使用defineComponent包裹一层，因为它只是一个复合类（API），而不是组件。最佳实践**/exportdefaultdefineComponent({...App.inject(),});很多类实例在一些复杂的业务时，有时需要多个实例PassOnTo类实例准备好后，PassOnTo装饰器会把相应的函数传递给回调，这样我们就可以顺利的使用hooks比如onMountedimport{onMounted}from'vue';@SetupclassAppextendsDefine{@PassOnTo(onMounted)publiconMounted(){}}Watch在使用vue-property-decorator的Watch装饰器时，他会收到一个string类型，无法正确识别类实例中是否存在这个字段，但是现在vue-class-setup可以检查你的类型是否正确。如果传入类实例中不存在的字段，类型会报错上下文{公共值=0;公共立即值=0；publiconClick(){this.value++;}@Watch('value')publicwatchValue(value:number,oldValue:number){if(value>100){this.value=100;}}@Watch('value',{immediate:true})publicwatchImmediateValue(value:number,oldValue:号码|undefined){if(typeofoldValue==='undefined'){this.immediateValue=10;}else{this.immediateValue++;}}}defineExpose在某些场景下，我们希望要暴露组件的一些方法和属性，那么我们就需要使用defineExpose编译宏来定义export了，所以提供了一个.use类静态方法来帮助大家获取当前注入的类实例为什么要用类？其实我并不想讨论这个问题。喜欢的自然喜欢，不喜欢的自然不喜欢。是人写的，别人说vue不适合做大型项目，但是在我们公司实践中经受住了考验，基本没有生成几千行的组件代码。如果你喜欢用class风格写代码，不妨关注一下vue-class-setup如果你的业务比较复杂，需要使用SSR和微服务架构，不妨关注一下vue-genesis