VueJS - 計算屬性

我們已經瞭解了 Vue 例項和元件的方法。計算屬性類似於方法，但與方法相比有一些區別，我們將在本章中討論這些區別。

在本節結束時，我們將能夠決定何時使用方法，何時使用計算屬性。

讓我們用一個例子來理解計算屬性。

示例

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

這裡，我們建立了一個包含名字和姓氏的.html檔案。名字和姓氏是使用屬性 firstname 和 lastname 繫結的文字框。

我們呼叫計算方法 getfullname，它返回輸入的名字和姓氏。

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

當我們在文字框中輸入內容時，函式會返回相同的內容，當 firstname 或 lastname 屬性更改時也是如此。因此，藉助計算屬性，我們無需執行任何特定操作，例如記住呼叫函式。計算屬性會在其內部使用的屬性（即 firstname 和 lastname）發生更改時自動呼叫。

以下瀏覽器中顯示了相同的內容。在文字框中輸入內容，相同的內容將使用計算函式更新。

現在，讓我們嘗試理解方法和計算屬性之間的區別。兩者都是物件。內部定義了返回值的函式。

對於方法，我們將其作為一個函式呼叫，而對於計算屬性，則將其作為一個屬性呼叫。讓我們用下面的例子來理解方法和計算屬性的區別。

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

在上面的程式碼中，我們建立了一個名為getrandomno1的方法和一個帶有函式getrandomno的計算屬性。兩者都使用 Math.random() 返回隨機數。

它在瀏覽器中顯示如下。多次呼叫方法和計算屬性以顯示其區別。

如果我們檢視上面的值，我們將看到計算屬性返回的隨機數保持不變，無論呼叫多少次。這意味著每次呼叫它時，都會為所有值更新最後一個值。而對於方法，它是一個函式，因此每次呼叫它都會返回一個不同的值。

計算屬性中的 Get/Set

在本節中，我們將透過一個示例學習計算屬性中的 get/set 函式。

示例

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

我們定義了一個繫結到fullname的輸入框，它是一個計算屬性。它返回一個名為get的函式，該函式提供全名，即名字和姓氏。此外，我們還顯示了名字和姓氏，如下所示：

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

讓我們在瀏覽器中檢查一下。

現在，如果我們在文字框中更改姓名，我們將看到以下螢幕截圖中顯示的姓名沒有反映更改。

讓我們在 fullname 計算屬性中新增 setter 函式。

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

我們在 fullname 計算屬性中添加了 set 函式。

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

它以名稱作為引數，它就是文字框中的 fullname。之後，它以空格分隔並更新名字和姓氏。現在，當我們執行程式碼並編輯文字框時，瀏覽器中將顯示相同的內容。由於 set 函式，名字和姓氏將被更新。get 函式返回名字和姓氏，而 set 函式在編輯任何內容時更新它。

現在，文字框中輸入的內容與上面螢幕截圖中顯示的內容匹配。

列印頁面