Vue.js 2 Design Patterns and Best Practices

Computed

Computed properties allow for multiple expressions to be passed, and these properties on the Vue instance require the use of class getters/setters. So, if we wanted to retrieve a reversed version of our name, we could simply pass the following:

@Component({ template: `   <div>     <input type="text" v-model="name" />     <button @click="sayHello(name)">Say Hello!</button>     <p>{{nameReversed}}</p>   </div> `})export default class App extends Vue { @Prop({ default: 'Paul Halliday' }) name: string; // Computed values get nameReversed() {  return this.name.split("").reverse().join(""); }  sayHello(name: string): void {  alert(`Hello ${name}`) }}

This would otherwise have been equivalent to:

export default { computed: {  nameReversed() { return this.name.split("").reverse().join(""); ...