vue2升级vue3：class component的遗憾

在vue2，class 写法真的非常爽

import { Component as tsc } from 'vue-tsx-support';
import { Component, Watch } from 'vue-property-decorator';
import { State } from 'vuex-class';
import { debounce } from 'helpful-decorators';

@Component
export default class demo extends tsc<{}> {
    @State(state => state.queryContext.timeRange) curTimeRange;
    @Watch('$route.params.uid')
    @debounce(500)
    initPage() {
        //TODO
    }
}

继承

interface PageProps{}
@Component
export default class ChartWrapper extends Mixins<ChartWrapperBase>(ChartWrapperBase) implements PageProps {
    //TODO
}

但是到vue3，这个class 提案被废止了——GitHub上也停留在rc1版本了，已经2年左右没有提交代码了！

试了一下 8.0.0-rc.1
把  @Component 改为 @Options ，其他都不用怎么改。单个组件能跑。全局替换了下，发现大部分多页面与组件都跑步起来——报错的太多了——对后来人劝退！

vue-class-component made sense for Vue 2.x when the TypeScript support was really bad. Currently this library provides no additional benefits, it just modifies the syntax of declaring a component. Additionally almost all users of vue-class-component are using vue-property-decorator (https://github.com/kaorun343/vue-property-decorator) which also seems abandoned.

https://github.com/vuejs/vue-class-component/issues/569#issue-1021411164

class  API 被犹大 彻底 放弃

Update: the Class API proposal is being dropped.

https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

Two major reasons:

1. Current Class API proposal still has various edge cases / spec reliance / unresolved questions.

2. The new APIs proposed in Advanced Reactivity API #22 and Dynamic Lifecycle Injection #23 enables a new pattern (temporarily) named "composition functions) that can serve as a better component API than classes. Shipping both composition functions and Class API essentially results in 3 ways of doing the same thing - this is something we want to avoid at all costs. The advantage of composition functions over Classes will be discussed in more details below.

无奈，不能平滑升级，给差评——有大佬会说，react 也准备弃用 class 了

但是，对于我这类从java  出身的野生前端，确实觉得class  装饰器 更为亲切

升级事项，查看：https://levelup.gitconnected.com/from-vue-class-component-to-composition-api-ef3c3dd5fdda

至于之的实现方式，建议换 函数式 思路，比如：https://www.thisdot.co/blog/vue-3-composition-api-do-you-really-need-it

虽然网上 有很多各种的 兼容原来 vue-class-component  装饰器方案，

https://github.com/darrenrahnemoon/vue-class-api

但是还是弃坑了 ——目前基于生态原因，只能用vue

其实心里一直是 react  yyds！

转载本站文章《vue2升级vue3：class component的遗憾》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8844.html