vue中computed是什么 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

在Vue中，computed是一种计算属性，用于声明响应式的依赖关系。它是Vue实例中的一个属性，可以根据其他响应式属性的值进行计算，并返回一个新的值。

computed可以看作是Vue的一个计算缓存，它依赖于Vue的响应式系统，会自动根据依赖的属性进行缓存。当依赖的属性发生变化时，computed会重新计算，否则会直接从缓存中获取计算结果，避免了不必要的重复计算。

computed和methods的区别在于，computed是一个属性，而methods是一个方法。computed是基于它的依赖进行缓存的，只有当一个依赖改变时，才会重新计算computed的值。而methods在每次调用时都会执行一次函数。

使用computed有以下几个注意事项：

计算属性的计算结果是基于它的依赖属性进行的。当依赖属性发生改变时，计算属性会重新计算。
计算属性只有在它的相关依赖发生改变时才会重新求值，所以计算属性是惰性求值的。
计算属性不支持异步操作。

下面是一个简单的示例，展示了如何在Vue中使用computed：

var vm = new Vue({
  data: {
    radius: 5 // 半径
  },
  computed: {
    area: function () {
      return Math.PI * Math.pow(this.radius, 2); // 面积计算公式
    },
    circumference: function () {
      return 2 * Math.PI * this.radius; // 周长计算公式
    }
  }
});

console.log(vm.area); // 输出：78.53981633974483
console.log(vm.circumference); // 输出：31.41592653589793

在上面的示例中，我们声明了一个计算属性area和circumference来计算一个圆的面积和周长。当radius发生改变时，area和circumference会自动更新。在获取area和circumference的值时，不需要使用括号，因为它们被视为属性而不是方法。

总结起来，computed是Vue中的一种计算属性，它可以根据依赖属性的值进行计算，并返回一个新的值。它的特点是可以缓存计算结果，只在依赖属性改变时重新求值，从而提高性能。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，computed是一种用于创建基于响应式数据而产生的新的数据的属性。computed属性是依赖于其他属性的值，并且会根据依赖属性的变化而自动更新。

下面是关于Vue中computed的一些重要点：

创建computed属性：
在Vue组件中，可以通过在computed对象中定义属性来创建computed属性。每个computed属性都需要一个对应的函数，这个函数会返回计算属性的值。
例如：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

缓存机制：
computed属性默认会进行缓存，只有当依赖的属性发生改变时，才会重新计算。这意味着如果computed属性依赖的属性没有发生改变，那么computed属性的值将保持不变。
这种缓存机制可以帮助提高性能，避免不必要的计算开销。
依赖追踪：
Vue能够自动追踪computed属性所依赖的属性，并在这些属性发生变化时更新computed属性。这意味着只要有依赖变化，Vue会自动重新计算computed属性的值。
这种依赖追踪是基于响应式系统实现的，Vue会自动监测到属性的改变，并在需要的时候进行重新计算。
Getter和Setter：
computed属性本质上是一个只读属性，也就是说它的值是通过getter函数计算得到的，不能直接修改。但是可以通过给computed属性定义一个setter函数，来实现计算属性的双向绑定。
Setter函数会接受新的值作为参数，通过setter函数来更新computed属性依赖的其他属性的值，进而触发computed属性的重新计算。
计算属性的使用场景：
computed属性适用于需要根据其他属性的值动态计算得到的数据。它可以帮助组件编写更加简洁、高效的逻辑代码，并提高应用程序的性能。常见的应用场景包括格式化数据、过滤数据、排序数据等。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，computed（计算属性）是一种特殊的属性，用于实现对Vue实例的数据根据一定规则进行计算，然后返回计算结果。

computed常用于对数据的处理和计算，特别是当数据的处理逻辑比较复杂，或者多个数据之间存在依赖关系时，computed能够更好地管理和更新数据。

在使用computed时，我们可以将计算属性定义在Vue实例的computed选项中。以下是computed的使用方法和操作流程：

1. 定义computed属性

在Vue实例中使用computed属性之前，我们需要先在computed选项中定义这个属性。可以使用对象字面量的方式定义computed属性，也可以使用Vue实例中的methods选项中的方法定义computed属性。

computed: {
  // 对数据进行简单处理的computed属性
  processedData: function() {
    // 返回处理后的数据
    return this.data + 'processed';
  },
  // 带参数的computed属性，可以使用箭头函数来定义
  processedDataWithParam: (state) => (param) => {
    // 返回使用参数处理后的数据
    return state.data + param;
  }
}

2. 使用computed属性

在Vue实例中使用computed属性时，可以像使用普通属性一样直接访问computed属性。另外，computed属性的值是由计算属性的返回值决定的。

<template>
  <div>
    <!-- 直接访问computed属性 -->
    <p>{{ processedData }}</p>
    <!-- 传参访问computed属性 -->
    <p>{{ processedDataWithParam('param') }}</p>
  </div>
</template>

3. 更新computed属性

当computed属性依赖的响应式数据发生变化时，computed属性会自动更新。Vue会对computed属性进行缓存，只有当computed属性依赖的数据发生变化时，才会重新计算computed属性的值。

4. computed属性的缓存策略

Vue默认会对computed属性进行缓存，只有在computed属性依赖的数据发生变化时，才会重新计算computed属性的值。这种缓存策略可以避免不必要的计算，提高性能。

如果不希望某个computed属性进行缓存，可以在computed属性的定义中使用函数来替代对象字面量的方式，这样每次访问该属性时都会重新计算。

computed: {
  noCacheData: function() {
    // 没有缓存的computed属性，每次访问都会重新计算
    return this.data + 'processed';
  }
}

使用computed属性能够简化代码，并且提供了更好的可读性和维护性。在Vue中，推荐使用computed属性来处理复杂的数据逻辑。

1年前 0条评论