VueJS - obliczone właściwości

Widzieliśmy już metody dla instancji Vue i komponentów. Obliczone właściwości są podobne do metod, ale z pewną różnicą w porównaniu z metodami, które omówimy w tym rozdziale.

Pod koniec tego rozdziału będziemy mogli podjąć decyzję, kiedy używać metod, a kiedy obliczonych właściwości.

Rozważmy obliczone właściwości na przykładzie.

Przykład

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

Tutaj stworzyliśmy .htmlplik z imieniem i nazwiskiem. Imię i Nazwisko to pole tekstowe powiązane z właściwościami imię i nazwisko.

Wywołujemy metodę obliczeniową getfullname, która zwraca wpisane imię i nazwisko.

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

Kiedy wpisujemy w pole tekstowe, funkcja zwraca to samo, gdy właściwości firstname lub lastname ulegają zmianie. Dlatego z pomocą computed nie musimy robić nic konkretnego, jak na przykład zapamiętywanie wywołania funkcji. Po wyliczeniu jest wywoływany samoczynnie, ponieważ właściwości użyte w środku ulegają zmianie, tj. Imię i nazwisko.

To samo jest wyświetlane w następującej przeglądarce. Wpisz pole tekstowe, a to samo zostanie zaktualizowane za pomocą obliczonej funkcji.

Teraz spróbujmy zrozumieć różnicę między metodą a obliczoną właściwością. Obie są obiektami. Wewnątrz są zdefiniowane funkcje, które zwracają wartość.

W przypadku metody nazywamy ją funkcją, a obliczoną jako właściwość. Korzystając z poniższego przykładu, pozwól nam zrozumieć różnicę między metodą a obliczoną właściwością.

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

W powyższym kodzie stworzyliśmy metodę o nazwie getrandomno1 i obliczona właściwość z funkcją getrandomno. Oba zwracają liczby losowe za pomocą funkcji Math.random ().

Jest wyświetlany w przeglądarce, jak pokazano poniżej. Metoda i obliczona właściwość są wywoływane wiele razy, aby pokazać różnicę.

Jeśli spojrzymy na powyższe wartości, zobaczymy, że liczby losowe zwrócone z obliczonej właściwości pozostają takie same niezależnie od tego, ile razy są wywoływane. Oznacza to, że za każdym razem, gdy jest wywoływana, ostatnia wartość jest aktualizowana dla wszystkich. Podczas gdy w przypadku metody jest to funkcja, dlatego za każdym razem, gdy jest wywoływana, zwraca inną wartość.

Pobierz / ustaw w obliczonych właściwościach

W tej sekcji nauczymy się na przykładzie funkcji get / set w obliczanych właściwościach.

Przykład

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

Zdefiniowaliśmy jedno pole wejściowe, do którego jest przypisane fullname, która jest obliczoną właściwością. Zwraca funkcję o nazwieget, która podaje pełne imię i nazwisko, czyli imię i nazwisko. Ponadto wyświetliliśmy imię i nazwisko jako -

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

Sprawdźmy to samo w przeglądarce.

Teraz, jeśli zmienimy nazwę w polu tekstowym, zobaczymy, że to samo nie jest odzwierciedlone w nazwie wyświetlanej na poniższym zrzucie ekranu.

Dodajmy funkcję ustawiającą do obliczonej właściwości 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>

Dodaliśmy funkcję set do właściwości obliczonej 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]
      }
   }
}

Ma nazwę jako parametr, która jest niczym innym jak pełną nazwą w polu tekstowym. Później jest dzielony na spację, a imię i nazwisko są aktualizowane. Teraz, gdy uruchomimy kod i wyedytujemy pole tekstowe, to samo zostanie wyświetlone w przeglądarce. Imię i nazwisko zostaną zaktualizowane z powodu ustawionej funkcji. Funkcja get zwraca imię i nazwisko, podczas gdy funkcja set aktualizuje je, jeśli cokolwiek jest edytowane.

Teraz wszystko, co jest wpisane w polu tekstowym, pasuje do tego, co jest wyświetlane, jak widać na powyższym zrzucie ekranu.