vue是一款用于构建用户界面的渐进式javascript框架。在vue中，数据的响应式更新是vue最强大的特性之一。在vue中，数据绑定是单向的，即数据的变化会影响到界面，但是界面的操作（如用户的输入等）并不会影响到数据。这些数据更新都是通过vue中的computed属性自动完成的。
computed属性是Vue中用来处理响应式数据的一种方法，其本质是一个计算属性。相较于Vue中的methods方法，computed属性更侧重于处理数据的计算和数据的缓存，让Vue更高效地更新数据。本文将会介绍computed属性的使用方法及相关注意事项。
computed属性的基本使用方法
在Vue中声明computed属性的方法很简单，在Vue实例中添加一个computed对象即可，例如：
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})在上述代码中，我们声明了一个Vue实例，并在computed对象中定义了一个reversedMessage属性，该属性使用了message属性进行计算。当message属性的值发生变化时，Vue会自动更新计算出来的reversedMessage的值，并将其渲染到界面上。
需要注意的是，computed属性必须是一个函数。这个函数可以接收参数，也可以不接收任何参数。在函数内部，要使用this来访问Vue实例中的数据，而不能直接访问变量。
立即学习“前端免费学习笔记（深入）”；
此外，computed属性的值会被缓存起来，只有在依赖的数据发生变化时才会重新计算，这样可以大大提高Vue的效率。例如，在上例中，当message属性的值不变时，每次读取reversedMessage属性会直接返回缓存中已经计算好的值，并不会重新计算。
computed属性的高级用法
computed属性中的setter
computed属性不仅可以用来读取数据，也可以用来设置数据。在computed属性中定义的set方法，会在属性被赋值时被调用。例如：
var vm = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newVal) {
var names = newVal.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})在上例中，我们定义了一个fullName属性，该属性可读可写。我们定义了一个get方法，返回了firstName和lastName的组合字符串。同时也定义了一个set方法，接收一个参数newVal，根据这个参数设置firstName和lastName的值。需要注意，computed属性中的setter函数并不会返回任何值。
computed属性的依赖
computed属性的计算是基于它所依赖的属性进行的。当依赖的属性发生变化时，computed属性会自动重新计算。Vue通过依赖追踪的机制，能够自动收集computed属性中使用的依赖关系。例如：
var vm = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
console.log('computed fullName')
return this.firstName + ' ' + this.lastName
},
reversedName: function () {
console.log('computed reversedName')
return this.fullName.split('').reverse().join('')
}
}
})
console.log(vm.reversedName)
vm.firstName = 'Tom'
console.log(vm.reversedName)在上述代码中，fullName和reversedName都依赖于firstName和lastName两个属性。当我们访问reversedName属性时，Vue会自动计算出fullName和reversedName的值，并输出computed fullName和computed reversedName。当修改firstName的值时，Vue会重新计算fullName和reversedName的值，输出computed fullName和computed reversedName。
需要注意的是，当computed属性依赖的数据发生变化时，computed属性中的getter被调用的时间是异步的。这意味着，在依赖的数据发生变化时，Vue并不会立即更新computed属性的值，而是在下一个事件循环中更新。这样可以避免不必要的性能开销。
computed属性与watch属性的区别
除了computed属性之外，Vue还提供了另一种处理响应式数据的方法——watch属性。它们都有处理响应式数据的功能，但是在实现方式上有所不同。
watch属性是一个监听器，当一个数据发生变化时，watch属性会立即执行一段响应函数，并且具有处理数据的副作用。例如：
var vm = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe',
fullName: ''
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})在上例中，我们定义了watch属性来监听数据的变化，并在firstName或lastName发生变化时更新fullName属性的值。需要注意的是，watch属性中的处理函数在数据变化时会立即执行。
computed属性与watch属性最大的区别在于它们的实现方式和使用场景。computed属性更适合处理数据计算和缓存等重复性操作，可以大大提高Vue的效率。而watch属性则更适合监听数据的变化，例如当数据变化时触发动画效果或发送请求等具有副作用的操作。
结论
在Vue中，computed属性是处理响应式数据最常用的方法之一。computed属性能够让我们更简洁高效地处理数据，避免了重复计算，同时也提高了Vue的性能。在使用computed属性时，需要注意computed属性中的setter函数、依赖关系和computed属性与watch属性的区别。
