Entender as propriedades computadas

• 2 minutos

Usando a sintaxe Handlebars ({{ }}), você pode exibir valores e injetar JavaScript no HTML. Essa sintaxe é poderosa, mas pode gerar códigos confusos ou repetitivos. Você pode usar propriedades computadas no Vue para descarregar cálculos e outras formas de cadeias de caracteres dinâmicas.

Criar uma propriedade computada

De modo semelhante a como os métodos são adicionados a um campo methods, as propriedades computadas são adicionadas ao campo computed. Uma propriedade computada é uma função que retorna um valor. Assim como um método, uma propriedade computada pode acessar a instância ativa do Vue usando this.

Você pode usar propriedades computadas para combinar firstName e lastName em uma propriedade fullName, fazer pesquisas em uma matriz para retornar o valor correto ou fazer outras tarefas dinâmicas.

Além disso, uma propriedade computada é reativa. Se qualquer valor na propriedade computada for alterado, ela será atualizada para refletir a alteração.

O exemplo a seguir cria um fullName.

const app = Vue.createApp({
    data() {
        return {
            firstName: 'Cheryl',
            lastName: 'Smith'
        }
    },
    computed: {
        fullName() {
            return `${this.lastName}, ${this.firstName}`
        }
    },
});

Um literal de cadeia de caracteres concatena os campos lastName e firstName.