Propriedades Computadas no Vue

É possível definir propriedades que serão calculadas de forma reativa com base em outras propriedades. Tais propriedades são chamadas de propriedades computadas. Elas estão localizadas na opção computed.

Vamos ver um exemplo. Suponha que as propriedades armazenem o nome e sobrenome do usuário:

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

Vamos criar uma propriedade full, que irá conter o nome completo com o sobrenome:

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

Vamos exibir o conteúdo de nossas propriedades no template:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

As propriedades computadas mudam de forma reativa. Isso significa que se mudarmos o nome ou sobrenome, nossa propriedade full mudará automaticamente de forma reativa e veremos imediatamente as mudanças na tela.