vue2 计算属性怎么使用，computed 使用详解

在 Vue 2 中，计算属性（computed properties）是基于其他数据属性计算出来的值。它们类似于方法，但不同之处在于，计算属性的值会被缓存，直到它所依赖的属性发生变化时才会重新计算。这使得计算属性在处理性能密集型操作时非常有用。

使用计算属性的步骤

1. 定义计算属性：

   • 在 Vue 实例的 computed 选项中定义计算属性。
   • 计算属性可以返回一个值，这个值会根据其依赖的数据属性自动更新。

2. 访问计算属性：

   • 在模板中访问计算属性时，就像访问数据属性一样。

示例

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

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

在上面的示例中，fullName 是一个计算属性，它会根据 firstName 和 lastName 的值自动计算并更新。如果 firstName 或 lastName 发生变化，fullName 也会自动更新。

计算属性的优点

• 缓存：计算属性的结果会被缓存，只有在相关依赖发生变化时才会重新计算。这避免了不必要的重复计算，提高了性能。
• 简洁：使用计算属性可以让模板逻辑更加简洁，避免在模板中直接编写复杂的逻辑。

计算属性的 getter 和 setter

你也可以为计算属性定义 getter 和 setter。通常，计算属性默认是只有 getter 的，但你可以为它添加 setter 来实现双向绑定。

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

在这个例子中，你不仅可以通过 fullName 来显示全名，还可以通过修改 fullName 来改变 firstName 和 lastName 的值。