什么是computed?它有什么用?

#什么是computed?它有什么用?| 来源: 网络整理| 查看: 265

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

computed有什么用?

可以避免模板中直接使用复杂的逻辑运算,增强可读性。比如: html {{firstname + ' ' + lastname}}

可以替换为:

html {{fullName}} js computed: { fullName() { return this.firstname + ' ' + this.lastname } } computed值是依赖响应式数据计算得来的,并且是缓存的。除非依赖数据发生改变,否则不会被重新计算。这使得computed值性能更高,避免不必要的计算。 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] } } } computed值也可以像普通的响应式数据一样,用于数据绑定或作为监视目标。

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

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

【本文地址】

公司简介

联系我们