vue里computed什么时候用

在Vue中，computed属性用于计算属性或派生属性，它通常在模板中用于展示数据或执行一些简单的逻辑。computed属性适用于以下场景：

1. 数据计算：当需要根据变量的值进行一些计算，并且希望将计算结果自动更新到视图中时，可以使用computed属性。例如，计算两个变量的和并展示在模板中，或者根据用户输入的数值进行动态计算。

2. 数据筛选和过滤：当需要根据一些条件对数据进行筛选或过滤时，computed属性是一个很好的选择。例如，根据用户的搜索关键词过滤列表中的数据，或者根据不同的条件返回不同的数据。

3. 数据排序和排序：当需要对数据进行排序时，computed属性可以轻松地实现。通过对数据进行排序并将结果展示在模板中，可以实现实时排序效果。同时，通过computed属性的缓存机制，可以提高性能。

4. 复杂逻辑处理：如果需要执行一些复杂的逻辑或算法，并且希望这些逻辑能够自动响应数据的变化，computed属性也是一个不错的选择。例如，根据一组数据计算出最优解或推荐结果，并在模板中展示。

需要注意的是，computed属性具有缓存机制，只有在依赖的触发器发生变化时才会重新计算。这意味着computed属性只有在其依赖的数据发生变化时才会更新。

综上所述，computed属性在Vue中可以用于计算、筛选、排序和处理复杂逻辑等场景，它能够方便地实现数据的自动计算和更新，并提高代码的可读性和可维护性。

在Vue中，computed属性用于计算和依赖其他响应式属性的值，并返回一个新的值。当计算属性中依赖的数据发生改变时，计算属性的值会自动更新。

computed属性适合用于以下情况：

1. 当需要根据一些响应式数据计算出一个新的值时，可以使用computed属性。例如，计算两个数的和或平均值时，可以将这些计算逻辑放在computed属性中。

2. 当需要通过过滤、排序或转换数据来渲染视图时，可以使用computed属性。通过computed属性，可以将这些数据处理逻辑抽离出来，使代码更加清晰和可读。

3. 当需要监听多个属性的变化并返回一个新的派生属性时，可以使用computed属性。computed属性会自动追踪它所依赖的属性，并在它们发生改变时更新。

4. 当需要缓存计算结果，以避免不必要的重复计算时，可以使用computed属性。computed属性默认会具有缓存功能，只有当其依赖的属性发生改变时，才会重新计算。

5. 当需要在模板中使用一个依赖其他响应式数据计算出的值，而不是一个方法时，可以使用computed属性。使用computed属性可以让模板更清晰和简洁。

总结起来，computed属性适合用于简单的数据计算、数据处理和派生属性的计算，可以使代码更简洁、可读性更高，并提高应用的性能。在Vue中，应当合理使用computed属性来优化代码和减少不必要的重复计算。

在Vue中，computed用于计算属性。computed属性是基于响应式依赖的，当响应式依赖发生变化时，computed属性会自动更新。

在什么情况下使用computed属性呢？computed属性通常用于以下场景：

1. 对数据进行处理：当需要对某个数据进行一系列计算或处理时，可以使用computed属性。例如，计算一个数组的长度、求和等等。

2. 数据的衍生和联动：当存在多个数据属性之间的关联时，可以使用computed属性。computed属性可以根据其他数据属性的变化来动态计算生成其值。当关联的数据属性发生变化时，computed属性会自动重新计算。

3. 缓存数据：computed属性可以通过缓存数据，避免重复计算。computed属性默认情况下是具有缓存功能的，只有当依赖的响应式依赖发生变化时，computed属性才会重新获取值。这样可以提高性能。

下面我们具体介绍一下computed属性的使用方法和操作流程。

1. 定义computed属性：在Vue实例的computed属性中定义计算属性。可以使用对象字面量或计算属性函数来定义。

computed: {
  // 通过对象字面量定义计算属性
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(value) {
      const [firstName, lastName] = value.split(' ');
      this.firstName = firstName;
      this.lastName = lastName;
    }
  },
  // 通过计算属性函数定义计算属性
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

2. 在模板中使用computed属性：在模板中通过{{}}表达式来使用computed属性。computed属性的值会根据依赖的数据属性进行计算，并进行缓存。

<p>Full Name: {{ fullName }}</p>
<p>Reversed Message: {{ reversedMessage }}</p>

3. 响应式更新：当computed属性依赖的数据属性发生变化时，computed属性会自动重新计算。这是Vue的响应式机制所实现的。computed属性会对依赖的数据属性进行侦测，当数据属性发生变化时，computed属性会自动更新。无需手动调用。

this.firstName = 'Alice'; // fullName属性会自动更新

总结一下，computed属性用于根据依赖的响应式依赖自动计算值。它适用于对数据进行处理、数据的衍生和联动以及缓存数据的场景。在Vue中，只要相关依赖发生变化，computed属性会自动更新，无需手动调用。