vue中的computed是什么 • Worktile社区

worktile

Worktile官方账号

在Vue.js中，computed是一种计算属性。计算属性是一种可以根据现有的数据来动态计算并返回新数据的属性。它类似于一个方法，但可以通过属性的方式访问，而不需要调用。

computed经常用于需要根据data中的数据进行一些计算后得出结果的情况。使用computed可以避免在模板中编写复杂的逻辑，代码更加简洁和可读。

在使用computed时，我们需要在Vue实例的computed属性中定义计算属性的名称和计算方法。计算方法可以是一个函数，该函数会被Vue实例监听并缓存结果。当依赖的数据发生变化时，计算属性会重新计算并更新相应的值。

例如，假设我们有一个Vue实例中的data属性包含了一个名为items的数组，我们可以使用computed来计算数组的长度：

new Vue({
  data: {
    items: [1, 2, 3, 4, 5]
  },
  computed: {
    itemLength: function() {
      return this.items.length;
    }
  }
})

在上面的例子中，itemLength是一个计算属性，它会动态计算出items数组的长度，并将计算结果绑定到Vue实例中。我们可以通过this.itemLength的方式在模板中使用计算属性的值。

computed还具有缓存的特性，即当计算属性依赖的数据没有发生变化时，Vue会直接返回之前缓存的计算结果，而不需要重新计算。这样可以提高性能，避免不必要的计算。

总结起来，computed是一种在Vue.js中用于计算和返回新数据的属性。它通过监听依赖的数据变化并缓存计算结果，从而实现了更加简洁和高效的数据处理方式。

1年前 0条评论

不及物动词

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

在Vue中，computed是一种计算属性。它是Vue数据属性的一种补充，用于根据已有的数据属性计算出一个新的属性。

computed属性的特点如下：

1.声明方式：在Vue实例中，可以使用computed选项来声明computed属性。例如：

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

2.缓存机制：computed属性默认具有缓存机制。也就是说，只有相关的依赖发生改变时，computed属性才会重新计算。这样可以避免不必要的计算，提升性能。

3.依赖追踪：Vue会自动追踪computed属性的依赖关系。也就是说，当computed属性引用的数据发生变化时，computed属性会自动重新计算。

4.支持setter：computed属性默认是只读的，也就是说不能直接修改computed属性的值。但是可以通过定义setter函数来实现对computed属性的修改。例如：

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

5.智能依赖收集：Vue会智能地收集computed属性的依赖关系，也就是说，只会在真正需要时才会计算computed属性的值。这个特性可以优化性能，避免不必要的计算。

总而言之，computed属性是一种便捷的方式来实现数据的计算和监听。它可以根据已有的数据属性计算出一个新的属性，并且具有缓存机制和智能依赖收集的特性，可以提高应用的性能和响应速度。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue.js中，computed是一种计算属性，它的作用是根据已有的数据衍生出一个新的属性。computed的值会根据依赖的数据的变化进行自动更新。

computed属性的使用方法可以分为两种情况：

直接定义computed属性：
在Vue组件中，可以通过定义computed属性来创建一个计算属性。computed属性是一个函数，其中可以定义对数据的计算逻辑。
```
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}
```
在上述代码中，fullName是一个计算属性，通过将firstName和lastName拼接起来的方式计算出全名。

在Vue组件的模板中，可以直接使用计算属性，就像使用普通的数据一样：
```
<div>{{ fullName }}</div>
```
当firstName或lastName的值发生变化时，计算属性fullName会自动更新。
使用get和set定义计算属性：
除了直接定义computed属性之外，还可以使用get和set方法来定义计算属性的getter和setter。
```
computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(value) {
      const names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}
```
在上述代码中，我们定义了一个计算属性fullName，使用get方法来获取属性的值，使用set方法来设置属性的值。当计算属性被获取或设置时，对应的get和set方法会被调用。

在模板中使用计算属性与直接定义computed属性时的用法相同。

computed属性的特点：

computed属性是响应式的，当依赖的数据发生变化时，computed属性会自动更新。
computed属性是惰性的，只有当计算属性被访问时才会进行相关计算。
computed属性是缓存的，只要依赖的数据没有发生变化，多次访问计算属性会直接返回之前计算的结果，不会重新计算。

总结：
computed属性是Vue.js中的一种计算属性，通过对已有数据进行计算，可以衍生出新的属性。computed属性具有响应式、惰性和缓存的特点，可以方便地进行复杂的数据计算。

1年前 0条评论