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:

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

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

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

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

<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.

Suponha que a propriedade cost armazene o preço de um produto, e a propriedade amount - a quantidade desses produtos. Crie uma propriedade computada price, que irá conter o custo total dos produtos (preço multiplicado pela quantidade)

Crie um botão, cujo clique irá alterar a propriedade cost. Verifique se a propriedade computada também será alterada com isso.