对于 Vue.js 开发者来说，computed 属性是一个极其实用的特性，它能够在模板渲染时计算出对应的值并通过缓存来提高性能。然而，对于初学者来说，computed 属性的理解有时可能会存在一些误区。在本文中，我们将从另一个角度来理解 computed 属性，以便深入了解其内部机制和使用方式，并为开发者提供更丰富的知识储备和指导意义。
computed 属性的本质
为了更好地理解 computed 属性，我们需要先深入了解其本质。在 Vue.js 内部，computed 属性实际上是一种依赖收集机制。简单来说，当定义 computed 属性时，Vue.js 会将该属性与其他的数据属性进行绑定。一旦某个数据属性被修改，Vue.js 就会自动检测其所有相关的 computed 属性，并从缓存中更新它们的值。这种机制极大地提高了模板渲染的效率，同时也使得开发者能够更方便地对某些数据进行处理和计算。
computed 属性的用法
Computed 属性的使用方式通常分为两类：基础用法和高级用法。在这里，我们将分别介绍它们的使用方法和应用场景。
基础用法
基础用法是指直接在 Vue 对象中定义 computed 属性，并将其赋值为一个函数。该函数将自动接收所有相关的数据属性，并根据这些属性的值来返回计算结果。下面是一段基本的 computed 属性的使用示例：
// javascriptcn.com 代码示例
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})在上面的代码中，我们定义了一个 computed 属性 fullName，该属性将返回 firstName 和 lastName 的拼接结果。此时，如果我们修改了 firstName 或 lastName 的值，Vue.js 将自动更新 fullName 的值，并在模板中重新渲染该值。
高级用法
高级用法则是指通过定义 getter 和 setter 函数来进一步扩展 computed 属性的功能。通过 getter 函数，我们可以对源数据进行一些处理和过滤，从而实现更复杂的计算逻辑。而通过 setter 函数，则可以方便地实现数据双向绑定，使得计算结果能够自动更新到源数据中。下面是一个复杂的 computed 属性的使用示例：
// javascriptcn.com 代码示例
new Vue({
data: {
list: [
{name: 'John', age: 30},
{name: 'Jane', age: 25},
{name: 'Bob', age: 40},
{name: 'Alice', age: 22}
],
keyword: ''
},
computed: {
filterList: {
get: function () {
var keyword = this.keyword.toLowerCase()
return this.list.filter(function (item) {
return item.name.toLowerCase().indexOf(keyword) !== -1
})
},
set: function (newVal) {
this.list = newVal
}
}
}
})在上面的代码中，我们定义了一个 computed 属性 filterList，该属性将根据 keyword 对 list 进行过滤，并返回符合条件的数组。同时，通过 setter 函数，我们可以将计算结果立即写入到源数据 list 中，从而实现数据的双向绑定。此时，如果我们修改了 keyword 的值，Vue.js 将自动更新 filterList 的值，并在模板中重新渲染该值。
总结
在本文中，我们从依赖收集机制的角度来理解 computed 属性，并通过示例代码进一步介绍了其基础用法和高级用法。通过深入学习和理解 computed 属性，我们不仅能更好地使用其提供的实用功能，还能够在开发过程中更加灵活地应对各种问题和需求。因此，我们建议所有开发者都要掌握 computed 属性的基础知识和高级用法，以便更好地应对实际开发中的各种场景和挑战。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d08fd7d4982a6ebe85e2d