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