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时，请注意各个依赖项之间的关系，以便有效地提高性能。