在 Vue 中computed如何实现传参？
在 Vue.js 中，计算属性(computed)是非常有用的，它允许我们通过定义在组件中的计算属性来动态计算显示在模板中的值，而不是在模板中直接渲染计算后的结果。而对于某些情况下，我们需要向计算属性传参，则需要使用计算属性的 getter 函数特性来实现。
一、计算属性的基本用法
计算属性通常用于计算复杂的属性，且依赖于多个已知属性的值。Vue会在调用计算属性时自动缓存结果，并且只在相关属性值改变时重新计算
// HTML:
<div id="app">
<p>{{fullName}}</p>
</div>
//JS:
new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
});
在这个例子中，我们定义了一个计算属性 fullName，它会根据 firstName 和 lastName 的值计算出全名，并显示在模板中的 p 元素中。
二、计算属性中的函数参数
有时候我们需要计算属性中传入参数，例如根据某个输入字段来过滤显示项等。这时候我们就需要使用计算属性的 getter 函数特性来实现传参。
下面是一个例子：
// HTML:
<div id="app">
<label>Filter:</label>
<input type="text" v-model="query">
<ul>
<li v-for="(item, index) in filteredItems" :key="index">{{item}}</li>
</ul>
</div>
// JS:
new Vue({
el: '#app',
data: {
items: ['apple', 'banana', 'orange', 'mango', 'lemon'],
query: ''
},
computed: {
filteredItems() {
return this.items.filter(item => item.includes(this.query));
}
}
});
在这个例子中，我们有一个文本字段和一个列表，我们需要根据文本字段的输入值，过滤列表中的项，并显示过滤后的结果。
首先，我们在 data 中定义了 items 数组和 query 字符串。然后我们使用计算属性 filteredItems 过滤 items 数组，并根据 query 字符串过滤需要显示的项。
在计算属性 filteredItems 的 getter 函数内，我们可以传入一个参数来作为过滤字符串，这个参数可以通过计算属性实例的 getter 函数特性进行传递。
computed: {
filteredItems() {
return (query) => this.items.filter(item => item.includes(query));
}
}
修改后，filteredItems 的值是一个函数，它接受一个参数 query，用于过滤 items 中的项，并根据需要返回结果。
在模板中，我们可以通过调用计算属性实例的 getter 函数，并将 query 作为参数传入来使用 filteredItems 函数。
<li v-for="(item, index) in filteredItems(query)" :key="index">{{item}}</li>
这样，每次 query 值发生改变时，过滤结果会自动更新。
总结
在 Vue.js 中，计算属性(computed)是非常有用的，提供了动态计算显示在模板中的值的方法，并使用 getter 函数缓存结果，提高了性能。当需要传参时，可以使用计算属性的 getter 函数特性来实现传参。
