Vue.js中的计算属性

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

基本用法

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

var vm = new Vue({
  data: {
    message: 'Hello Vue!',
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: 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: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: 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"

总结

计算属性适合用于处理复杂逻辑或者对数据进行转换的场景，尤其是需要依赖多个响应式数据的情况。通过利用缓存，Vue能够高效地计算和更新这些属性，同时保持代码简洁和可读性。

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140110401