Vue.js中的计算属性

Vue.js中的计算属性（computed properties）是用于声明响应式依赖的属性。它们会根据它们的依赖进行缓存，并且只有在相关依赖发生改变时才会重新求值。这使得它们非常适合用来处理复杂逻辑和数据处理。

基本用法

在Vue实例中，可以通过computed选项来定义计算属性：

var vm = new Vue({data: {message: 'Hello Vue!',},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('');}}
});console.log(vm.reversedMessage); // 输出： "!euV olleH"

计算属性的缓存

计算属性默认是具有缓存功能的，只有相关依赖发生改变时才会重新求值。在上面的例子中，只有当message发生变化时，reversedMessage才会重新计算。

计算属性 vs 方法

与方法（methods）相比，计算属性是基于它们的响应式依赖进行缓存的。这意味着只要message没有发生变化，多次访问reversedMessage会立即返回之前的计算结果，而不必重新执行函数。

计算属性的setter

除了getter，计算属性还可以具有setter，用于处理对属性的更新：

var vm = new Vue({data: {firstName: 'John',lastName: 'Doe'},computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}
});console.log(vm.fullName); // 输出： "John Doe"vm.fullName = 'Jane Smith';
console.log(vm.firstName); // 输出： "Jane"
console.log(vm.lastName); // 输出： "Smith"