什么是computed?它有什么用?

computed是Vue中的一项功能,它允许我们基于响应式依赖进行计算,并且computed值是缓存的,除非它的响应式依赖变化,否则computed值不会被重新计算。

computed有什么用?

1. 可以避免模板中直接使用复杂的逻辑运算,增强可读性。比如:

html
<div>{{firstname + ' ' + lastname}}</div>

可以替换为:

html
<div>{{fullName}}</div>

js
computed: {
  fullName() {
    return this.firstname + ' ' + this.lastname
  }
}

2. computed值是依赖响应式数据计算得来的,并且是缓存的。除非依赖数据发生改变,否则不会被重新计算。这使得computed值性能更高,避免不必要的计算。
3. computed支持getter和setter,当computed依赖的数据发生改变时会重新触发计算,并且setter会触发响应式数据的更新。
   例如:

js
computed: {
  fullName: {
    // getter
    get() {
      return this.firstname + ' ' + this.lastname
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstname = names[0]
      this.lastname = names[names.length - 1]
    }
  }
}

4. computed值也可以像普通的响应式数据一样,用于数据绑定或作为监视目标。

所以,总结来说,computed的主要使用场景是:

1. 避免在模板中放入太多的逻辑运算,增强可读性。
2. 对复杂逻辑进行缓存,优化性能。
3. 支持响应性的派生数据绑定。