Propriedades Computadas no Vue.js
Além de propriedades simples, o Vue permite a utilização de propriedades computadas, conhecidas como computed properties. Estas são semelhantes a funções, mas possuem diferenças fundamentais. Para compreender melhor sua utilidade, considere o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="text" v-model="name" />
<input type="text" v-model="age" />
<p>Nome: {{name}} Idade: {{age}}</p>
<p>{{checkAge()}}</p>
</div>
<script>
Vue.createApp({
data() {
return { name: "Tom", age: 25 };
},
methods: {
checkAge: function () {
console.log("checkAge");
return this.age > 18 ? "acesso permitido" : "acesso negado";
},
},
}).mount("#app");
</script>
</body>
</html>Neste exemplo, a função checkAge retorna um valor baseado na idade do usuário. Sempre que o valor de age é modificado, a função é recalculada. Entretanto, o problema deste método é que ele será chamado sempre que qualquer propriedade do componente for alterada, mesmo aquelas que não possuem relação com a lógica da função, como a propriedade name. Isso pode ser observado pelos logs gerados na execução de checkAge ao modificar apenas o campo name.
ℹ️ As propriedades computadas são úteis em casos de cálculos complexos. Elas são armazenadas em memória e só são recalculadas quando necessário. Se o cálculo é muito simples e rápido, é mais eficiente usar métodos.
Propriedades Computadas como Alternativa
Uma abordagem mais eficiente é utilizar propriedades computadas. Elas são declaradas no objeto computed e permitem que apenas mudanças relevantes acionem o recálculo do valor.
<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="text" v-model="name" />
<input type="text" v-model="age" />
<p>Nome: {{name}} Idade: {{age}}</p>
<p>{{enabled}}</p>
</div>
<script>
Vue.createApp({
data() {
return { name: "Tom", age: 25 };
},
computed: {
enabled: function () {
console.log("computed");
return this.age > 18 ? "acesso permitido" : "acesso negado";
},
},
}).mount("#app");
</script>
</body>
</html>Neste exemplo, a propriedade computada enabled é declarada no objeto computed. Dessa forma, ela será recalculada apenas quando a propriedade age for modificada. Isso pode ser observado ao modificar o campo name sem que a função enabled seja chamada.
Getters e Setters em Propriedades Computadas
Propriedades computadas podem ter um getter e um setter. O getter define a lógica de leitura do valor, enquanto o setter define como o valor será atualizado. Por padrão, uma propriedade computada possui apenas um getter. No exemplo a seguir, são implementados ambos:
<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" />
<input type="text" v-model="lastname" />
<input type="text" v-model="fullname" />
<p>Nome Completo: {{fullname}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
data() {
return { firstname: "Tom", lastname: "Smith" };
},
computed: {
fullname: {
get: function () {
return this.firstname + " " + this.lastname;
},
set: function (newValue) {
const names = newValue.split(" ");
this.firstname = names[0];
this.lastname = names[names.length - 1];
},
},
},
}).mount("#app");
</script>
</body>
</html>
Neste exemplo, o getter da propriedade fullname concatena firstname e lastname. O setter divide o valor atribuído e atualiza as propriedades firstname e lastname individualmente. Essa abordagem facilita o gerenciamento de valores derivados de outras propriedades, permitindo maior flexibilidade e consistência no comportamento do componente.
Documentação oficial: