If we prefer to use classes, we can use the class-based components API that comes with Vue.
In this article, we’ll look at how to developing Vue apps with class-based components.
Computed Properties in Class-Based Components
To add computed properties into class-based components, we can add getters and setters into our class.
For instance, we can write:
<template>
<div>
<input v-model="name" />
</div>
</template>
<script>
import Vue from "vue";
import Component from "vue-class-component";
@Component
export default class HelloWorld extends Vue {
firstName = "jane";
lastName = "smith";
get name() {
return `${this.firstName} ${this.lastName}`;
}
set name(value) {
const [firstName, lastName] = value.split(" ");
this.firstName = firstName;
this.lastName = lastName || "";
}
}
</script>
We have an input that’s bound to the name computed property with v-model .
In the component class, we have the firstName and lastName reactive properties.
Below that, we have the name getter method that returns the firstName and lastName combined.
And then we add a name setter that gets the value and split it with split .
Then we assign the split values back to this.firstName and this.lastName .
Hooks
The mounted hook lets us run code when the component is mounted.
And the render hook lets us render template content in the class component:
<script>
import Vue from "vue";
import Component from "vue-class-component";
@Component
export default class HelloWorld extends Vue {
mounted() {
console.log("mounted");
}
render() {
return <div>Hello World</div>;
}
}
</script>
We replaced the template tag with the render method.
Register Components
We can register components with the components property in the object we pass into the Component decorator.
For instance, we can write:
<template>
<Greeting />
</template>
<script>
import Vue from "vue";
import Component from "vue-class-component";
const Greeting = {
template: `<div>hello</div>`,
};
@Component({
components: {
Greeting,
},
})
export default class HelloWorld extends Vue {}
</script>
to register the Component that we created.
Vue Router Hooks
If we want to add other hooks into our Vue class-based components, we’ve to register them.
For instance, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Foo from "./views/Foo";
import Bar from "./views/Bar";
import VueRouter from "vue-router";
Vue.config.productionTip = false;
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
];
const router = new VueRouter({
routes
});
Vue.use(VueRouter);
new Vue({
router,
render: (h) => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<router-link to="/foo">Foo</router-link>
<router-link to="/bar">Bar</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
views/Foo.vue
<template>
<div>foo</div>
</template>
<script>
import Vue from "vue";
import Component from "vue-class-component";
Component.registerHooks([
"beforeRouteEnter",
"beforeRouteLeave",
"beforeRouteUpdate",
]);
@Component
export default class Foo extends Vue {
beforeRouteEnter(to, from, next) {
console.log("beforeRouteEnter");
next();
}
beforeRouteUpdate(to, from, next) {
console.log("beforeRouteUpdate");
next();
}
beforeRouteLeave(to, from, next) {
console.log("beforeRouteLeave");
next();
}
}
</script>
views/Bar.vue
<template>
<div>bar</div>
</template>
<script>
import Vue from "vue";
import Component from "vue-class-component";
Component.registerHooks([
"beforeRouteEnter",
"beforeRouteLeave",
"beforeRouteUpdate",
]);
@Component
export default class Bar extends Vue {
beforeRouteEnter(to, from, next) {
console.log("beforeRouteEnter");
next();
}
beforeRouteUpdate(to, from, next) {
console.log("beforeRouteUpdate");
next();
}
beforeRouteLeave(to, from, next) {
console.log("beforeRouteLeave");
next();
}
}
</script>
We add Vue Router into our Vue app with the routes array in main.js .
Then we create the VueRouter instance with the routes array.
And we call Vue.use(VueRouter); to register the components and component methods.
And we pass router into the Vue instance.
In App.vue , we add the router-link s and router-view to let us render the routes and the links that we can click on to navigate through the routes.
Then we register the Vue Router hooks in Foo.vue and Bar.vue with Component.registerHooks .
We pass in the strings with the hook names into the array.
Then finally, we add the methods with the same name in the component classes.
Now when we navigate through the pages, the hooks will run.
Conclusion
We can add computed properties and hooks into our Vue class-based components.
