VueJS - Propiedades calculadas

Ya hemos visto métodos para instancias de Vue y componentes. Las propiedades calculadas son como los métodos, pero con alguna diferencia en comparación con los métodos, que analizaremos en este capítulo.

Al final de este capítulo, podremos tomar una decisión sobre cuándo usar métodos y cuándo usar propiedades calculadas.

Entendamos las propiedades calculadas con un ejemplo.

Ejemplo

<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;
      }
   }
})

Aquí hemos creado .htmlarchivo con nombre y apellido. Nombre y apellido es un cuadro de texto que se enlaza con las propiedades nombre y apellido.

Estamos llamando al método calculado getfullname, que devuelve el nombre y el apellido ingresados.

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

Cuando escribimos en el cuadro de texto, la función devuelve lo mismo, cuando se cambian las propiedades nombre o apellido. Por lo tanto, con la ayuda de computed no tenemos que hacer nada específico, como recordar llamar a una función. Con calculado, se llama por sí mismo, ya que las propiedades utilizadas dentro cambian, es decir, nombre y apellido.

Lo mismo se muestra en el siguiente navegador. Escriba en el cuadro de texto y el mismo se actualizará utilizando la función calculada.

Ahora, intentemos comprender la diferencia entre un método y una propiedad calculada. Ambos son objetos. Hay funciones definidas dentro, que devuelve un valor.

En el caso del método, lo llamamos como una función y por calculado como una propiedad. Con el siguiente ejemplo, comprendamos la diferencia entre método y propiedad calculada.

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

En el código anterior, hemos creado un método llamado getrandomno1 y una propiedad calculada con una función getrandomno. Ambos están devolviendo números aleatorios usando Math.random ().

Se muestra en el navegador como se muestra a continuación. El método y la propiedad calculada se llaman muchas veces para mostrar la diferencia.

Si miramos los valores anteriores, veremos que los números aleatorios devueltos por la propiedad calculada siguen siendo los mismos independientemente del número de veces que se llame. Esto significa que cada vez que se llama, el último valor se actualiza para todos. Mientras que para un método, es una función, por lo tanto, cada vez que se llama, devuelve un valor diferente.

Obtener / Establecer en propiedades calculadas

En esta sección, aprenderemos sobre las funciones get / set en propiedades calculadas usando un ejemplo.

Ejemplo

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

Hemos definido un cuadro de entrada que está vinculado a fullname, que es una propiedad calculada. Devuelve una función llamadaget, que da el nombre completo, es decir, el nombre y el apellido. Además, hemos mostrado el nombre y apellido como -

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

Comprobemos lo mismo en el navegador.

Ahora, si cambiamos el nombre en el cuadro de texto, veremos que el mismo no se refleja en el nombre que se muestra en la siguiente captura de pantalla.

Agreguemos la función setter en la propiedad calculada 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>

Hemos agregado la función set en la propiedad calculada 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]
      }
   }
}

Tiene el nombre como parámetro, que no es más que el nombre completo en el cuadro de texto. Posteriormente, se divide en espacios y se actualiza el nombre y el apellido. Ahora, cuando ejecutamos el código y editamos el cuadro de texto, se mostrará lo mismo en el navegador. El nombre y el apellido se actualizarán debido a la función set. La función get devuelve el nombre y apellido, mientras que la función set los actualiza, si se edita algo.

Ahora, todo lo que se escriba en el cuadro de texto coincide con lo que se muestra como se ve en la captura de pantalla anterior.