Simplify Vue Components with vue-class-component
While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-component flattens component development by allowing you to add your data properties and handlers directly as properties of your class.
Instructor: [00:00] Create a new file. We'll call this app.vue. Set up a basic template with a div and a message in it. Then we'll add our script tag. Instead of the usual exportDefault object, we're going to export a class of app, which extends Vue.
[00:20] We'll need to import vue from Vue, then instead of a data function which returns an object for our data, we can just say message is, "Hello from class." Now, to make this work, I do need to npm install vue-class-component.
[00:35] Then with vue-class-component installed, I can import component from vue-class-component, and decorate my class with the component function, where just object we pass in are some options. You'll notice right away that VS Code complains about experimental decorators.
[00:54] Your editor may do the same, so I'm going to remove that warning with a JS config.json file, and simply tell the compiler that we want to allow experimental decorators. Then back in our app.vue file, if we reload the window, you'll see that error goes away, because it's picked up our configuration to allow decorators.
[01:19] To use this, we just import app from app. Now, tell Vue to render our app. You'll see the result is, "Hello from class." Now, I am using Poi in my terminal to run and build this project. Poi comes preconfigured with the Babel plugin that allows decorators.
[01:40] If you look at the list of defaults in Poi, you can see we get decorators, class properties, which is this, and other standard features you would expect to use in a Vue project. If you don't want to install the Babel plugin for decorators, you can always just ditch that at sign.
[01:56] A decorator is really just a functional. I'll take this closing paren, paste it there, and take exportDefault, and paste it up here. Yeah, the decorator is a function which returns a function, then invokes it with the thing underneath.
[02:12] This, if I hit save, is the exact same thing as if I were to do that. Now, my personal reasoning for using vue-class-component, rather than writing a, we'll just call this, traditional is that Vue deals a lot with the this concept in JavaScript.
[02:32] When you write a data function, you have to return an object like that. You'll use methods, which is an object, like an onClick, which would change. If I had a message of "hello" and then I'd access this.message is "goodbye."
[02:55] The equivalent in vue-class-component is simply saying on click, this.message equals goodbye. We'll add the onClick here. Click is onClick. I'll go ahead and click this. It changes to goodbye, and you can see if I grab this export default, cut that, paste it here, we'll just remove all of this. We're just exporting the object.
[03:21] You can see we have this same thing, hello. I click, and it changes to goodbye. Because Vue works so much with this, I find it much easier to read in class. As a general rule, when I use this a lot, I stick to classes, versus an object, where you're invoking a data function, returning an object, and methods with functions accessing this. I find vue-class-component much easier to manage.