如何在Vue中使用computed properties

Vue中的计算属性（computed properties）主要用于声明式地定义数据依赖，当依赖项发生变化时，计算属性会自动更新。计算属性最常见的用途包括复杂逻辑的复用、数据格式化、条件渲染的简化。以数据格式化为例，假如你有一个用户对象，你希望在界面上显示用户的全名。而用户对象包含 firstName 和 lastName 这两个字段，你可以创建一个计算属性 fullName，它会基于 firstName 和 lastName 返回一个格式化后的字符串，界面上只需引用 fullName 即可。

一、计算属性的基本使用

在Vue组件的computed选项中定义计算属性。这些属性将基于它们的依赖响应式地更新：

data() {
  return {
    firstName: 'Jane',
    lastName: 'Doe'
  };
},
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

使用计算属性的好处是，你只需在模板中引用fullName，Vue 会自动跟踪firstName和lastName的变化，并在它们变更时重新计算fullName。

二、计算缓存 vs 方法

在Vue中，你可以通过定义方法来达到和计算属性同样的效果，但计算属性是基于它们的响应式依赖缓存的。只有在依赖项发生改变时，计算属性才会重新计算。这意味着计算属性对于性能优化非常关键，尤其是涉及到复杂逻辑和大量数据处理时。

methods: {
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

getFullName作为方法，每次重新渲染时都会调用，而计算属性fullName只有在firstName或lastName变更时才会重新计算。

三、计算属性的 setter

计算属性默认只有getter函数，但你也可以提供一个setter函数，当你尝试设置计算属性值时，setter函数会被调用。这允许你分割一个表单字段，将其绑定到计算属性，并在用户输入时同步更新依赖的数据。

computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1] || '';
    }
  }
}

通过这样的setter，你可以操作fullName，Vue将会分别更新firstName和lastName。

四、计算属性与侦听器的比较

计算属性通常是用于处理数据变化的首选方式。然而，有时你可能需要在数据变化时执行异步操作或更复杂的逻辑，这时候就需要使用侦听器（watchers）。

侦听器允许你执行任何代码响应数据的改变，但它们不具备计算属性的缓存特性。在某些情况下，为了避免不必要的副作用和性能问题，优选使用计算属性。

五、在模板及组件间复用计算属性

一个常见的场景是，你可能需要在多个组件间复用相同的计算逻辑。Vue提供了混入(mixins)和插件(plugins)两种机制来实现逻辑复用。

使用混入，你可以将计算属性定义在一个混合对象中，并在组件中引用该混合对象：

const fullNameMixin = {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
export default {
  mixins: [fullNameMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  }
};

使用插件，你可以全局性的添加特定的计算属性或方法，这对于跨项目复用逻辑非常有用。

六、在不同的Vue版本中使用计算属性

Vue的不同版本（如Vue 2与Vue 3）提供了相似但略有差异的API来定义计算属性。在Vue 3中，Composition API引入了一个新的computed函数，它可以结合setup函数使用，为我们提供了另一种方式来定义计算属性：

import { computed } from 'vue';
setup() {
  const firstName = ref('Jane');
  const lastName = ref('Doe');
  const fullName = computed(() => `${firstName.value} ${lastName.value}`);
  return { firstName, lastName, fullName };
}

在上述例子中，我们使用ref和computed从Vue的Composition API来创建响应式值和计算属性。