在 Vue.js 中，computed 属性是一个非常重要的属性，是用于计算属性的。在这篇文章中，我们将学习到 computed 属性的用法和一些常见的应用场景。
1. computed 的基本用法
computed 的基本用法非常简单，例如我们有如下的一个 Vue 实例：
new Vue({
data: {
message: 'Hello Vue.js!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})在这个实例中我们定义了一个 data 属性 message，以及一个 computed 属性 reversedMessage。reversedMessage 的值是基于 message 属性计算得来的，它将字符串翻转。
2. computed 的缓存机制
computed 属性具有缓存机制，也就是说，computed 中的值只有在它依赖的数据发生改变时才会重新计算。下面是一个示例：
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
console.log('计算 fullName')
return this.firstName + ' ' + this.lastName
}
}
})在这个示例中，我们定义了一个 fullName 的 computed 属性，它由 firstName 和 lastName 计算得来。如果我们在控制台中执行如下代码：
vm.fullName会看到 '计算 fullName'，这是因为这是第一次计算 fullName。如果我们再次执行这行代码：
vm.fullName则不会再次看到 '计算 fullName'，这是 computed 的缓存机制起作用的结果。
3. computed 的 setter 方法
computed 属性不仅可以读取，还可以设置。我们可以为计算属性指定一个 setter 方法，在计算属性被修改时，可以通过 setter 方法来触发相应的操作。下面是一个示例：
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: {
get: function () {
console.log('计算 fullName')
return this.firstName + ' ' + this.lastName
},
set: function (newFullName) {
var names = newFullName.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})在这个示例中，我们为 fullName 的 computed 属性指定了一个 setter 方法，当我们执行如下代码时：
vm.fullName = 'Jane Smith'会发现控制台输出了 '计算 fullName'，并且 firstName 和 lastName 被修改为 Jane 和 Smith。
4. computed 的应用场景
computed 属性在 Vue.js 中有很多的应用场景，其中比较常见的有：
4.1 过滤器
computed 属性可以用于过滤器，例如我们有如下的列表：
new Vue({
data: {
people: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 20 }
],
filterText: ''
},
computed: {
filteredPeople: function () {
return this.people.filter(function (person) {
return person.name.indexOf(this.filterText) !== -1
}.bind(this))
}
}
})在这个示例中，我们定义了一个 people 数组和一个 filterText 的数据属性，以及一个 filteredPeople 的 computed 属性。filteredPeople 是通过 people 属性和 filterText 属性计算得到的，这个计算过程类似于一个过滤器，它将满足条件的人员列表返回。
4.2 表单验证
computed 属性可以用于表单验证，例如我们有一个表单：
new Vue({
data: {
username: '',
password: ''
},
computed: {
isFormValid: function () {
return this.username.length > 0 && this.password.length > 0
}
}
})在这个示例中，我们定义了一个 username 和 password 的数据属性，以及一个 isFormValid 的 computed 属性。isFormValid 是通过 username 和 password 属性计算得到的，这个计算过程类似于一个表单验证器，它只有当 username 和 password 都非空时才有效。
5. 总结
computed 属性是 Vue.js 中的一个非常重要的属性，它可以用于计算属性的值，具有缓存机制和 setter 方法，并且在过滤器、表单验证等场景中有广泛的应用。学会了 computed 属性的用法，我们可以更加高效地编写 Vue.js 应用。