Vue Computed傳參

一、Computed傳參

Computed屬性是指在Vue實例中定義的帶有緩存特性的計算屬性。這些屬性可以基於數據模型中已有的屬性進行計算，從而派生出新的屬性。例如：

data: {
  firstName: 'John',
  lastName: 'Doe'
},
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

在這個例子中，computed屬性fullName將由this.firstName和this.lastName的值計算而來。

Computed屬性可以傳遞參數，這些參數再通過setter/getter訪問。

computed: {
  getFullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (name) {
      var parts = name.split(' ')
      this.firstName = parts[0]
      this.lastName = parts[1]
    }
  }
}

這個例子中，computed屬性getFullName作為getter和setter分別獲取和更新數據模型中的firstName和lastName屬性。

二、Vue Computed原理

Vue Computed的原理是基於JavaScript中的getter和setter實現的。當渲染模板時，computed屬性會以相應依賴項之間的依賴關係被求值。在依賴項改變時，computed屬性會重新求值。

從原理上理解，computed屬性可以有效地緩存計算結果並提高性能。

三、Vue Computed和Methods的區別

Vue Computed和Methods的區別在於它們在實現物理屬性時的行為不同。

Methods屬性指的是直接在Vue實例上定義的方法，這些方法可以用於處理與視圖無關的數據處理邏輯。例如：

data: {
  x: 1
},
methods: {
  increment: function () {
    this.x++;
  }
}

在這個例子中，methods屬性increment方法的作用是將data屬性x的值加1。

與此相反，computed屬性是基於已有的物理屬性進行計算，而不是進行任何數據操作。當計算屬性所依賴的物理屬性發生變化時，computed屬性自動進行重計算。

換句話說，Computed屬性是一種派生自數據模型的依賴關係，而Method屬性是一種在數據模型外部定義的函數。

四、Vue Computed傳參用法

Computed屬性的參數可以用於實現諸如過濾、分組和排序等功能。

例如，假設我們有一個包含許多條評論的數據模型，並且我們需要以「最新評論」和「最熱評論」的方式對這些評論進行排序。我們可以將這些排序行為實現為Computed屬性，並將一個參數傳遞給該屬性。

<template>
  <div>
    <div>排序方式：<button @click="setSortBy('new')">最新評論</button><button @click="setSortBy('hot')">最熱評論</button></div>
    <div v-for="comment in sortedComments" :key="comment.id">
      <h3>{{comment.title}}</h3>
      <p>{{comment.body}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        { id: 1, title: 'title1', body: 'body1', createdAt: '2021-06-25T10:25:00.000Z', likes: 10 },
        { id: 2, title: 'title2', body: 'body2', createdAt: '2021-06-24T10:25:00.000Z', likes: 9 },
        { id: 3, title: 'title3', body: 'body3', createdAt: '2021-06-22T10:25:00.000Z', likes: 15 }
      ],
      sortBy: ''
    }
  },
  computed: {
    sortedComments() {
      var comments = this.comments.slice()
      if (this.sortBy === 'hot') {
        return comments.sort(function (a, b) {
          return b.likes - a.likes
        })
      } else {
        return comments.sort(function (a, b) {
          return new Date(b.createdAt) - new Date(a.createdAt)
        })
      }
    }
  },
  methods: {
    setSortBy(sortBy) {
      this.sortBy = sortBy
    }
  }
}
</script>

在這個例子中，我們將setSortBy方法綁定在模板中的兩個按鈕上。當用戶單擊按鈕時，sortBy參數將分別設置為「new」或「hot」。

computed屬性sortedComments將基於sortBy參數中傳遞的值進行計算並返回評論列表。如果sortBy屬性值為「hot」，則評論列表將按likes屬性降序排列；如果sortBy屬性值為「new」，則評論列表將按createdAt屬性排序。

五、Vue Computed傳參深入實踐

實際開發中，Vue Computed還可以與其他數據管理庫，如Vuex和React+Redux等共同使用，從而實現更加高級的數據處理方式。

例如，我們可以利用Vue Computed將不同的Redux Store中的數據整合到一個統一的組件中：

<template>
  <div>
    <div>{{user.name}}, You have {{count}} Cart Items.</div>
    <button @click="addToCart(item)">Add To Cart</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      user: 'user/state',
      cart: 'cart/state'
    }),
    count() {
      return this.cart.items.length
    }
  },
  methods: {
    ...mapActions({
      addToCart: 'cart/add'
    })
  }
}
</script>

在這個例子中，我們將user和cart的狀態映射為computed屬性，並在count計算屬性中使用了cart狀態中的items長度。同時，我們還使用了mapActions將addToCart方法映射到計算的方法中。

六、總結

本文詳細闡述了Vue Computed傳參的用法和原理，介紹了Computed屬性和Methods屬性之間的區別，並給出了一個運用Vue Computed和Vuex共同使用的實例。在使用Vue Computed時，請注意各個依賴項之間的關係，以便有效地提高性能。