在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 (GitHub - kaorun343/vue-property-decorator: Vue.js and Property Decorator) which also seems abandoned.
Deprecate vue-class-component · Issue #569 · vuejs/vue-class-component · GitHub
class API 被犹大 彻底 放弃
Update: the Class API proposal is being dropped.
[Abandoned] Class API proposal by yyx990803 · Pull Request #17 · vuejs/rfcs · GitHub
Two major reasons:
Current Class API proposal still has various edge cases / spec reliance / unresolved questions.
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
至于之的实现方式,建议换 函数式 思路,比如:Vue 3 Composition API, do you really need it? - This Dot Labs
虽然网上 有很多各种的 兼容原来 vue-class-component 装饰器方案,
GitHub - darrenrahnemoon/vue-class-api: Class Implementation of Vue3 Options API
但是还是弃坑了 ——目前基于生态原因,只能用vue
其实心里一直是 react yyds!
转载本站文章《vue2升级vue3:class component的遗憾》,
请注明出处:vue2升级vue3:class component的遗憾 - vue3学习笔记 - 周陆军的个人网站