Learn TypeScript 3 by Building Web Applications

Computed properties

Vue.js, like Angular, advises against putting too much logic inside component templates. The reasons for this are obvious: bugs can quickly creep in, template logic is hard to test, the logic inside templates is not reusable, and, last but not least, templates become harder to understand, which is bad for maintainability.

By using computed properties, you can move logic to where it belongs: inside the controller.

Here's an example we've taken from Vue's official documentation.

The following is an example of a component template without a computed property:

<div id="example"> 
  {{ message.split('').reverse().join('') }} 
</div> 

The following is the same example, but with the logic inside a computed property:

<div id="example"> ...