VUE3基礎教學：使用Vue.js響應式框架之computed-Vue.js-PHP中文網

VUE3基礎教學：使用Vue.js響應式框架之computed

PHPz

發布： 2023-06-15 22:19:35

原創

1874 人瀏覽過

Vue.js是一款開源的JavaScript框架，它採用MVVM（Model-View-ViewModel）模式，旨在提供簡單、靈活的方式來建立使用者介面。其中，響應式框架是Vue.js最重要的特性之一，它允許開發者對資料進行雙向的綁定和響應式更新。在Vue.js中，computed就是其中一個重要的概念。本文將介紹computed的基礎用法和範例。

一. 什麼是computed？

computed是Vue.js中的一個屬性，它可以實現動態計算屬性的功能。也就是說，computed可以根據所依賴的資料動態計算出一個新值，而該計算屬性在所依賴的資料發生變化時會自動更新。與methods不同，computed是一個計算屬性而非方法。

二. computed的基礎使用

computed屬性可以使用以下方式進行定義：

new Vue({
  // ...
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

登入後複製

在上述程式碼中，我們定義了一個reversedMessage的計算屬性，它是基於message屬性的計算結果。

接下來，我們將在HTML模板中使用computed屬性。為了取得計算屬性的值，我們不再直接綁定message，而是使用computed屬性，如下所示：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

登入後複製

在模板中，我們可以使用差值表達式{{ }}來顯示計算屬性的值。由於我們已經將reversedMessage作為計算屬性進行了定義，因此Vue.js會自動進行計算並更新視圖。

三. computed的快取機制

在計算屬性所依賴的資料變更時，computed會自動重新計算並更新視圖。但是，當計算屬性所依賴的資料沒有改變時，computed會記住上一次計算的結果，並直接傳回上一次的值。這種快取機制可以提高應用的效能和效率。

舉個例子，如下程式碼中，我們定義了一個computed屬性fullName：

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  }
})

登入後複製

當我們第一次造訪fullName時，控制台會輸出一條「computed」的訊息。但是，當我們修改firstName或lastName屬性的值時，computed不會每次都重新計算，而是直接傳回上一次計算的結果。

四. computed與methods的差異

computed和methods都可以用來實現動態計算屬性的功能，它們的主要差異在於計算屬性的快取機制。

在範例中，我們定義了一個計算屬性fullName和一個方法getFullName：

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    getFullName: function () {
      console.log('method')
      return this.firstName + ' ' + this.lastName
    }
  }
})

登入後複製

在範本中，我們可以透過以下方式來呼叫fullName和getFullName：

<div id="example">
  <p>Computed fullName: "{{ fullName }}"</p>
  <p>Method fullName: "{{ getFullName() }}"</p>
</div>

登入後複製

我們發現，在呼叫getFullName方法時，每次都會重新計算，而不會使用快取結果。因此，如果我們需要頻繁地呼叫某個方法，那麼使用computed屬性可以提高應用程式的效能和效率。

五. computed的範例

以下是一個計算購物車總價的範例，我們假設購物車的資料結構如下：

new Vue({
  // ...
  data: {
    items: [
      { name: 'iPhone', price: 6999, count: 1 },
      { name: 'iPad', price: 3888, count: 2 },
      { name: 'MacBook', price: 9888, count: 1 }
    ]
  },
  computed: {
    totalPrice: function () {
      var result = 0
      for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].price * this.items[i].count
      }
      return result
    }
  }
})

登入後複製

在範本中，我們可以使用computed屬性來顯示購物車的總價：

<div id="example">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
      </tr>
      <tr>
        <td colspan="3">总价：</td>
        <td>{{ totalPrice }}</td>
      </tr>
    </tbody>
  </table>
</div>

登入後複製

在上述範例中，我們定義了一個計算屬性totalPrice，該屬性依賴items數組中所有商品的價格和數量。每當陣列中任一商品的價格或數量改變時，Vue.js會重新計算總價，並自動更新視圖。

六. 總結

在Vue.js中，computed是一個非常強大且重要的特性，它是實現動態計算屬性的關鍵。計算屬性的快取機制可以提高應用的效能和效率。與methods不同，computed是一個計算屬性而非方法。透過學習和使用computed，我們可以更方便和有效率地建立優秀的Vue.js應用程式。

以上是VUE3基礎教學：使用Vue.js響應式框架之computed的詳細內容。更多資訊請關注PHP中文網其他相關文章！