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

Exemplo do problema relacionado ao uso de v-model em Vue.js

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>

Usando getter e setter em propriedades computadas em Vue.js

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.