Vue Class Component Computed

Posted on  by admin

You’re browsing the documentation for v2.x and earlier. For v3.x, click here. In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain.

Prerequisites:

At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays message in reverse.

The problem is made worse when you want to include the reversed message in your template more than once. That’s why for any complex logic, you should use a computed property. Original message: "{{ message }}". Computed reversed message: "{{ reversedMessage }}". Here we have declared a computed property reversedMessage.

Objective:To learn how to use Vue computed properties.

Prerequisites

The function we provided will be used as the getter function for the property vm.reversedMessage:. You can open the console and play with the example vm yourself. The value of vm.reversedMessage is always dependent on the value of vm.message. You can, the setter will be invoked and vm.firstName and vm.lastName will be updated accordingly.

While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option.

This is most useful when you want to perform asynchronous or expensive operations in response to changing data. In this case, using the watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer.

None of that would be possible with a computed property. In addition to the watch option, you can also use the imperative vm.$watch API. ← Template SyntaxClass and Style Bindings →.

Readability

Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify . Vue.js 2 supports class-style components. If you are coming from an Angular (2+) background, you are probably familiar with the pattern of writing components as classes using properties and decorators to describe more complex parts of your component.

The biggest advantage class-style components have over standard Vue.js components is that they make it clearer where this actually points to in the compiled component, and allow for more concise code. In this article, you will be introduced to using vue-class-component and vue-property-decorator to support TypeScript in Vue.js class-based components.

To follow along with this article, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.

Some familiarity with setting up a Vue.js project and Single File Components. Some familiarity with TypeScript conventions. This tutorial was verified with Node v15.1.0, npm v6.14.8, Vue.js v2.6.11, TypeScript v3.9.3, @vue/cli v4.5.0, vue-class-component v7.2.3, and vue-property-decorator v8.4.2.

Computed Properties

You will need vue-class-component and vue-property-decorator installed.

You can use @vue/cli to create a new Vue.js project:. For the purposes of this tutorial, the configuration will require:. @vue/-plugin-typescript will install typescript, vue-class-component, and vue-property-decorator.

Then, navigate to the project directory:. At this point, you have a Vue.js project set up for TypeScript and class-style components.

A class component is a TypeScript class that extends the Vue object. In single-file components, make sure you set the