VueJS - Proprietà calcolate

Abbiamo già visto metodi per l'istanza di Vue e per i componenti. Le proprietà calcolate sono come i metodi ma con qualche differenza rispetto ai metodi, di cui parleremo in questo capitolo.

Alla fine di questo capitolo, saremo in grado di prendere una decisione su quando utilizzare i metodi e quando utilizzare le proprietà calcolate.

Comprendiamo le proprietà calcolate usando un esempio.

Esempio

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

Ecco, abbiamo creato .htmlfile con nome e cognome. Firstname e Lastname è una casella di testo che è associata utilizzando le proprietà firstname e lastname.

Stiamo chiamando il metodo calcolato getfullname, che restituisce il nome e il cognome inseriti.

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

Quando si digita nella casella di testo lo stesso viene restituito dalla funzione, quando vengono modificate le proprietà firstname o lastname. Quindi, con l'aiuto di computed non dobbiamo fare nulla di specifico, come ricordarci di chiamare una funzione. Con elaborato viene chiamato da solo, poiché le proprietà utilizzate all'interno cambiano, cioè nome e cognome.

Lo stesso viene visualizzato nel seguente browser. Digita nella casella di testo e lo stesso verrà aggiornato utilizzando la funzione calcolata.

Ora proviamo a capire la differenza tra un metodo e una proprietà calcolata. Entrambi sono oggetti. Ci sono funzioni definite all'interno, che restituiscono un valore.

In caso di metodo, lo chiamiamo come funzione e per calcolato come proprietà. Usando il seguente esempio, comprendiamo la differenza tra metodo e proprietà calcolata.

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

Nel codice sopra, abbiamo creato un metodo chiamato getrandomno1 e una proprietà calcolata con una funzione getrandomno. Entrambi restituiscono numeri casuali utilizzando Math.random ().

Viene visualizzato nel browser come mostrato di seguito. Il metodo e la proprietà calcolata vengono chiamati molte volte per mostrare la differenza.

Se guardiamo i valori sopra, vedremo che i numeri casuali restituiti dalla proprietà calcolata rimangono gli stessi indipendentemente dal numero di volte che viene chiamato. Ciò significa che ogni volta che viene chiamato, l'ultimo valore viene aggiornato per tutti. Considerando che per un metodo, è una funzione, quindi, ogni volta che viene chiamato restituisce un valore diverso.

Ottieni / imposta nelle proprietà calcolate

In questa sezione, impareremo le funzioni get / set nelle proprietà calcolate utilizzando un esempio.

Esempio

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

Abbiamo definito una casella di input a cui è associato fullname, che è una proprietà calcolata. Restituisce una funzione chiamataget, che fornisce il nome completo, ovvero il nome e il cognome. Inoltre, abbiamo visualizzato il nome e il cognome come -

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

Controlliamo lo stesso nel browser.

Ora, se cambiamo il nome nella casella di testo, vedremo che lo stesso non si riflette nel nome visualizzato nello screenshot seguente.

Aggiungiamo la funzione setter nella proprietà calcolata 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>

Abbiamo aggiunto la funzione set nella proprietà calcolata 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]
      }
   }
}

Ha il nome come parametro, che non è altro che il nome completo nella casella di testo. Successivamente, viene suddiviso in uno spazio e il nome e il cognome vengono aggiornati. Ora, quando eseguiamo il codice e modifichiamo la casella di testo, la stessa cosa verrà visualizzata nel browser. Il nome e il cognome verranno aggiornati grazie alla funzione set. La funzione get restituisce il nome e il cognome, mentre la funzione set lo aggiorna, se viene modificato qualcosa.

Ora, tutto ciò che viene digitato nella casella di testo corrisponde a ciò che viene visualizzato come mostrato nello screenshot sopra.