Menu
I wanna upgrade my vuejs project to typescript based on class components, but i read in vue issue's https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 :
Update: the Class API proposal is being dropped.
so what will happen to existing class component-based projects? and more important, based on this article: https://alligator.io/vuejs/using-typescript-with-vue/ which says
Since we are not using the class-style syntax, you use the as keyword to declare data as a data type.
is this way of using typescript safe in vue3.0?
432
In general, Vue 3 provides smaller bundle sizes, better performance, better scalability, and better TypeScript / IDE support. If you are starting a new project today, Vue 3 is the recommended choice. There are only a few reasons for you to consider Vue 2 as of now: You need to support IE11.
Other changes in Vue 3: Virtual DOM rewrite for better performance and improved TypeScript support. Native portals – now called Teleport. Fragments (virtual elements that won't be rendered in the DOM tree) More flexibility for global mounting.
Vue's reactivity system works by deeply converting plain JavaScript objects into reactive proxies. The deep conversion can be unnecessary or sometimes unwanted when integrating with external state management systems (e.g. if an external solution also uses Proxies).
Since components are reusable Vue instances, they accept the same options as new Vue , such as data , computed , watch , methods , and lifecycle hooks. The only exceptions are a few root-specific options like el .
Overview Vue Class Component is a library that lets you make your Vue components in class-style syntax. For example, below is a simple counter component written with Vue Class Component:
With version 3 on the horizon, the team has added a few supports to augment the library, simplify coding on Vue, and adopt modern techniques of Web development. Let's dig into the main new features of Vue 3.0 that will guide you through the development of Vue applications. The components in Vue 2.0, were created with the object-based Options API.
It's common for an app to be organized into a tree of nested components: This is very similar to how we nest native HTML elements, but Vue implements its own component model that allow us to encapsulate custom content and logic in each component. Vue also plays nicely with native Web Components.
One of the new features of Vue 3.0 is that it has added a set of function-based APIs that is called Composition API. These APIs have been added to address issues faced by Vue 2 for very large projects. The Composition API has caused the most controversy with the Vue community.
Currently there is no official class-based API. RFC was about adding one but was dropped for the reason discussed there.
Existing projects are using vue-class-component library which builds on top of official object-based component API (officially called Options API). This should continue to work in 3.0 (because Options API stays the same) but suffer from the same drawbacks mentioned in the RFC. Here is a comment from maintainer declaring support for Vue 3.
Second linked article is using TypeScript without vue-class-component - no classes, just regular object-based component API + TypeScript type annotations. So yes, this will work in 3.0
However if you are starting with TypeScript in Vue now, I would strongly recommend to take a look at the new composition API which will be added in 3.0. It's an official API (not a library) and has many benefits compared to any existing solution.
You can even use Composition API with Vue 2 thanks to composition-api - this is plugin but plan is in place to make it official, better integrated into Vue core and maintained by Vue core team.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
