计算属性

有时候需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}

在这里插入图片描述
此时我们就可以使用计算属性(因为是属性,在使用计算属性的时候就不用写括号)
在这里插入图片描述
还可以使用计算属性做一些复杂操作
在这里插入图片描述

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter
以上代码其实等价于下面的get方法的。计算属性一般实现的是Get方法,set方法是不需要实现的,所以一般直接不用它,它是一个只读属性。所以只有get方法也能实现效果,为了简写,就变成给了上面这种不带get的方法。
在这里插入图片描述
如果非要写上set方法,我们
在这里插入图片描述

计算属性的缓存

思考:methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢?
原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次
在这里插入图片描述
在这里插入图片描述
我们可以从控制台中看到,fullName打印了一次,但是getFullName打印了4次,由此可知,我们的计算属性的性能比较高,所以能使用计算属性就使用计算属性。

Logo

前往低代码交流专区

更多推荐