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:
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
至于之的实现方式,建议换 函数式 思路,比如: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
vue2升级vue3:class component的遗憾的更多相关文章
- vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9
项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...
- vue2升级vue3指南(二)—— 语法warning&error篇
本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)-- 环境准备和构建篇 Warning 1.deep /deep/和 ...
- vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件
如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...
- vue2升级vue3:vue-i18n国际化异步按需加载
vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage 但是本文还是详细说一遍: 为什么需要异 ...
- uniapp项目vue2升级vue3简单记录
看到好多开源项目都升级了vue3,看文章说vue3性能升级很多,而且组合式api很香,遂把最近开发的自助洗车app升级下,在此记录下出现的问题. uniapp升级vue3官方指南 我是先去vue官网看 ...
- vue2升级vue3指南(一)—— 环境准备和构建篇
1.nodejs和npm 注意二者的版本,版本过低需要升级,本人升级后的版本如下: $ node -v v16.15.1 $ npm -v 8.11.0 2.package.json 和依赖升级 由于 ...
- Vue2 到 Vue3,重温这 5 个常用的 API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等.虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,而且前不久V ...
- Vue2和Vue3技术整理1 - 入门篇 - 更新完毕
Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...
- vue2和vue3生命周期的区别
概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...
- 盘点Vue2和Vue3的10种组件通信方式(值得收藏)
Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信 ...
随机推荐
- fread实现getchar(加速!!!)
fread实现的getchar代码: inline char get() { static char buf[100000], *p1 = buf, *p2 = buf; return p1 == p ...
- MySQL高级SQL语句
MySQL高级SQL语句 围绕两张表 Location表 Store_Info表 #select选择 SELECT Store_Name FROM Store_Info; #distinct去重 ...
- BFF层提升业务性能实际解决方案,以及nodeJs和KOA框架介绍
本文干货满满,介绍了用BFF层(Back-end For Front-end)中间层提升性能的整体解决方案和思路,涉及前期技术调研,聚合业务分析,聚合方法,验收,最后向同学们普及node.koa基础知 ...
- HTML-9
(一)常用方法 toFixed(); 四舍五入到小数点后几位 var x=9.656; x.toFixed(0);//10 x.toFixed(2);//9.66 x.toFixed(4);//9.6 ...
- spring---面向切面(AOP @Pointcut 表达式篇)
AOP(面向切面编程),可以说是OOP(面向对象编程)的补充和完善.OOP引入封装.继承和多态性等概念来建立一种对象层次结构,用以模拟公共行为的一个集合. 当我们需要为分散的对象引入公共行为的时候,O ...
- Java 面试题之 Logback 打印日志是如何获取当前方法名称的?
在 Java 中,有四种方法可以获取当前正在执行方法体的方法名称,分别是: 使用 Thread.currentThread().getStackTrace() 方法 使用异常对象的 getStackT ...
- 【源码系列#01】vue3响应式原理(Proxy)
专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核推荐 欢迎各位ITer关注点赞收藏 在学习 Vue3 是如何进行对象的响应式代理之前,我想我们应该先去了解 ...
- PIR传感器选型及其使用介绍
(一)PIR简介 PIR传感器(Passive Infrared Sensor),即被动式红外传感器.它因为功耗低,价格低廉,使用简单从而被大量使用在门铃.猫眼.感应开关.小夜灯.安防等消费类产品上. ...
- wps表格求标准差怎么算?
在WPS表格中,要计算标准差,可以使用STDEV函数.标准差是一种衡量数据集合离散程度的统计指标.下面我将详细介绍如何使用STDEV函数来计算标准差. STDEV函数的语法为:STDEV(range) ...
- Java的四种内部类(成员内部变量,静态内部变量,局部内部类,匿名内部类)
内部类 内部类就是在一个内的内部再定义一个内 内部类的分类:成员内部类,静态内部类,局部内部类,匿名内部类 (1)成员内部类 指类中的一个普通成员,可以定义成员属性,成员方法 内部类是可以访问外部类的 ...