Vue.js 中的计算属性

在 Vue.js 中，计算属性是一种用于动态计算所依赖属性的值并返回结果的属性。这意味着，计算属性的值是基于其他属性的值计算出来的，而不是手动指定的。

定义计算属性

我们可以通过 computed 选项定义一个计算属性：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

上面的代码定义了一个计算属性 fullName，它返回拼接了 firstName 和 lastName 属性的值。现在，我们可以在模板中使用 fullName 属性：

<div id="app">
  <p>Full Name: {{ fullName }}</p>
</div>

模板会自动响应 firstName 和 lastName 属性的变化，并更新绑定的 fullName 属性的值。

计算属性与方法的对比

在某些情况下，我们可能需要使用方法来计算属性值。但是，与方法不同，计算属性是基于它们的依赖缓存的，只有在所依赖的属性发生变化时才会重新计算。

例如，下面的代码使用方法来计算 fullName：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  methods: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

这里，我们使用了一个方法 fullName() 来计算 fullName 的值。与之相反，我们可以使用计算属性来完成同样的操作：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

方法和计算属性都可以返回一个值，但是它们之间有一个很大的区别：计算属性是基于它们的依赖缓存的。

缓存计算属性

计算属性是基于它们的依赖缓存的，也就是说，只要所依赖的属性没有发生变化，计算属性就会返回缓存中的结果，而不会重新计算。这可以在计算开销大的属性时提高性能。

例如，假设我们在模板中使用了一个计算属性 reversedMessage，它基于 message 属性的值计算出一个反转后的字符串：

new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
})

现在，我们可以在模板中使用 reversedMessage 属性：

<div id="app">
  <p>Message: {{ message }}</p>
  <p>Reversed Message: {{ reversedMessage }}</p>
</div>

每当 message 属性发生变化时，reversedMessage 属性都会重新计算，这可能会导致性能问题。为了避免这种情况，我们可以使用 computed 选项的 cached 参数来缓存计算属性的结果：

new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: {
      get: function() {
        return this.message.split('').reverse().join('');
      },
      cache: true
    }
  }
})

现在，当 message 属性发生变化时，reversedMessage 属性将不会重新计算。

计算属性的 Setter 函数

计算属性也可以有一个 setter 函数，从而使其成为一个可读可写的属性。

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(value) {
        var names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
})

现在，我们可以使用 fullName 属性来获取名字。例如，假设我们对 fullName 进行了以下赋值操作：

app.fullName = 'Jack Smith';

在这种情况下，set 函数将解析名称 Jack Smith，并将 firstName 和 lastName 属性的值更新为 Jack 和 Smith。

结论

计算属性是一个非常强大的工具，可以帮助我们减少重复代码，提高代码的可读性和可维护性。当你需要动态计算所依赖属性的值时，计算属性是一个非常好的选择。不仅避免了代码冗余，还可以缓存计算结果，提高性能。