vue中computer计算属性

概述

计算属性（computed properties）是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，计算属性才会重新求值。

代码实例

data: {
        user: {
          firstName: 'John',
          lastName: 'Doe'
        }
      },
computed: {
  fullName: {
    // getter 方法
    get() {
      return this.user.firstName + ' ' + this.user.lastName;
    },
    // setter 方法
    set(newValue) {
      const names = newValue.split(' ');
      this.user.firstName = names[0];
      this.user.lastName = names[names.length - 1];
    }
  }
}

分析

上述代码中在get中定义了fullName属性，其接受一个返回值，值是由user对象中的firstName和lastName两个属性拼接而成的。因此此处fullName的依赖项就是这两个属性，每当这两个属性中的任何一个发生变化时，fullName 也会自动更新。