Intro
For those who, like me, arrived at Vue from Angular, probably miss some aspects and prefer others. I particularly prefer Vuex toNgRx when it comes to state management, but something that I never liked about Vue is the creation of components, where those with greater complexity become increasingly difficult to understand. At this point, Angular uses what we can call class-style syntax, where its components are classes with attributes, methods, etc. While in Vue, we use a JS object to create an instance of Vue according to its specifications.
This is the main advantage of using the Vue Class Component library, you transform your components into classes, which allows you to better organize your code, and more. With it you can create custom Decorators, extend other components and/or mixins and use additional Hooks when using Vue Router.
Here, we will cover only the basics, the idea is in the future to create an article on Vue-Property-Decorator that complements the usage of this library.
Installation
To create a project using Vue Class Component from scratch, you just need to follow Vue CLI steps, make sure to manually select your project features, add TypeScript then opt to use class-style component syntax.
Considering an existing project just install the library:
$ npm install --save vue vue-class-component
ou
$ yarn add --save vue vue-class-component
You must ensure that the Vue core is also installed, since Vue Class Component depends on it.
If you are using TypeScript, change your tsconfig.json adding experimentalDecorators: true. If you're using Babel, do the following:
$ npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
Then configure .babelrc:
{
"plugins": [
["@babel/proposal-decorators", { "legacy": true }],
["@babel/proposal-class-properties", { "loose": true }]
]
}
Then you are good to go.
Example
So, below you can see a regular Vue component:
export default {
components: { },
props: { },
data () {
return {
message: 'Hello World!'
}
},
computed: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
},
methods: {
changeMessage (val) {
this.message = val
}
},
created () { },
mounted () { },
}
As mentioned before, our component is a JS object that will turn into a Vue instance, so we must follow some rules.
datamust be a function that returns an object if you want to reuse this component in other places (and you probably will).computedhas properties with functions, but sometimes properties with an object containing one or two other functions (getters/setters).methodsis a object with functionsThe object also contains components that will be included, properties provided by a parent component and methods that are hooks automatically triggered on our component's life cycle.
What about Vue Class Component?
@Component({
components: { },
props: { },
})
export default class extends Vue {
message = 'Hello World!'
get reverseMessage () {
return this.message.split('').reverse().join('')
}
changeMessage (val) {
this.message = val
}
created () { }
mounted () { }
}
- Vue Class Component provides a decorator where we can define the components and the properties of our component, which makes sense, since they are one-time configurations.
-
datavalues are expressed as properties of the class - You can use
get/setaccessors to create computed values - Everything else is defined by member functions of the class (life cycle hooks, methods)
Important
It is not necessary to refactor your entire app to use this library. You can do it gradually or only with new components. Compatibility between components stays the same, you can include Class Components in standard components and vice versa.
Conclusion
Even though it is a very simple example, it is possible to observe a much more elegant code using Class Components, for those who like Angular or for the back-enders on duty, it is a much more familiar way of working with Vue.
If you are interested, you can check the original documentation for more.
Top comments (6)
VueJS 3.x does not support the class component approach and while I did use to love class components, I strongly suggest people just move to Vue 3's composition API. Much better in so many ways.
Vue Class Component V8 is beta now, should be available soon with support to Composition API features. Evan You itself put his hand on this project, I would not believe they will let it go that easily.
This is misleading.
Evan You has declared multiple times that, although initially the Class API seemed to solve a number of Typescript related problems, it actually created other, more complex ones, due to inferring props from multiple sources.
Read about it in detail.
He also declared it's not on Vue's roadmap to continue support for class API, as it would be a third way, besides Options API and Composition API of doing the same thing and it adds too much overhead. In general, his intention is to reduce the maintenance surface of Vue.
This means
vue-class-componentmaintainers are on their own, and the future of this syntax depends entirely on the future of the plugin and on how much effort the plugin maintainers are willing to put in, for maintaining compatibility with all the new additions to Vue core.That's interesting. I had thought retiring this functionality would not go over well and eventually the "upgrade pressure" if nothing else would force this to happen. Personally, having now gotten used to the composition API, I will not be going back to the class syntax but I do have a 2.x project which makes heavy use of the Class Components and maybe I'll look at the upgrade path based on this being available.
I like class style code, and I don't want to give it up
Use class style to write setup and support vue2 and vue3
github.com/fmfe/vue-class-setup
for anyone wondering how to use vue-class-component with vue3.x this stackoverflow answer should get you started: stackoverflow.com/questions/649830...
dev-to-uploads.s3.amazonaws.com/up...