VueJS - Propriedades Computadas

Já vimos métodos para a instância Vue e para componentes. As propriedades computadas são como métodos, mas com algumas diferenças em comparação aos métodos, que discutiremos neste capítulo.

No final deste capítulo, seremos capazes de tomar uma decisão sobre quando usar métodos e quando usar propriedades computadas.

Vamos entender as propriedades calculadas usando um exemplo.

Exemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h1>My name is {{firstname}} {{lastname}}</h1>
         <h1>Using computed method : {{getfullname}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

vue_computeprops.js

var vm = new Vue({
   el: '#computed_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

Aqui, nós criamos .htmlarquivo com nome e sobrenome. Nome e Sobrenome são caixas de texto vinculadas às propriedades nome e sobrenome.

Estamos chamando o método calculado getfullname, que retorna o nome e o sobrenome inseridos.

computed :{
   getfullname : function(){
      return this.firstname +" "+ this.lastname;
   }
}

Quando digitamos na caixa de texto o mesmo é retornado pela função, quando as propriedades firstname ou lastname é alterado. Assim, com a ajuda de computed, não precisamos fazer nada específico, como lembrar de chamar uma função. Com computed, ele é chamado por si mesmo, conforme as propriedades usadas dentro das alterações, ou seja, nome e sobrenome.

O mesmo é exibido no navegador a seguir. Digite na caixa de texto e o mesmo será atualizado usando a função computada.

Agora, vamos tentar entender a diferença entre um método e uma propriedade computada. Ambos são objetos. Existem funções definidas dentro, que retorna um valor.

No caso do método, nós o chamamos como uma função, e para computado como uma propriedade. Usando o exemplo a seguir, vamos entender a diferença entre método e propriedade computada.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed
            property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         });
      </script>
   </body>
</html>

No código acima, criamos um método chamado getrandomno1 e uma propriedade computada com uma função getrandomno. Ambos estão devolvendo números aleatórios usando Math.random ().

Ele é exibido no navegador conforme mostrado abaixo. O método e a propriedade computada são chamados várias vezes para mostrar a diferença.

Se observarmos os valores acima, veremos que os números aleatórios retornados da propriedade computada permanecem os mesmos, independentemente do número de vezes que ela é chamada. Isso significa que toda vez que é chamado, o último valor é atualizado para todos. Considerando que para um método, é uma função, portanto, toda vez que é chamado, ele retorna um valor diferente.

Obter / definir nas propriedades computadas

Nesta seção, aprenderemos sobre as funções get / set em propriedades computadas usando um exemplo.

Exemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  }
               }
            }
         });
      </script>
   </body>
</html>

Definimos uma caixa de entrada que está ligada a fullname, que é uma propriedade computada. Ele retorna uma função chamadaget, que fornece o nome completo, ou seja, o nome e o sobrenome. Além disso, exibimos o nome e o sobrenome como -

<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>

Vamos verificar o mesmo no navegador.

Agora, se mudarmos o nome na caixa de texto, veremos que o mesmo não se reflete no nome exibido na imagem a seguir.

Vamos adicionar a função setter na propriedade computada fullname.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.firstName = fname[0];
                     this.lastName = fname[1]
                  }
               }
            }
         });
      </script>
   </body>
</html>

Adicionamos a função set na propriedade computada fullname.

computed :{
   fullname : {
      get : function() {
         return this.firstName+" "+this.lastName;
      },
      set : function(name) {
         var fname = name.split(" ");
         this.firstName = fname[0];
         this.lastName = fname[1]
      }
   }
}

Ele tem o nome como parâmetro, que nada mais é do que o nome completo na caixa de texto. Posteriormente, ele é dividido no espaço e o nome e o sobrenome são atualizados. Agora, quando executarmos o código e editarmos a caixa de texto, a mesma coisa será exibida no navegador. O nome e o sobrenome serão atualizados por causa da função definida. A função get retorna o nome e o sobrenome, enquanto a função set os atualiza, se algo for editado.

Agora, tudo o que é digitado na caixa de texto combina com o que é mostrado na imagem acima.