Computed计算属性用法及方法对比

Computed

基本使用:

在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名(一般为名词)。

应用场景:

当数据A的逻辑很复杂时,把A这个数据写在计算属性中。

代码位置:

通过选项computed:{计算属性a:值}

 值:

带有返回值return的函数。

示例:

普通计算

computed依赖于ref 

computed示例

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果:

若我们将同样的函数定义为一个方法而不是计算属性,两种方式在结果上确实是完全相同的,然而,不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

示例

fullName 调用了三次而计算属性只出现了一次,这就是缓存当函数的内容不发生改变他就只会重复调用。

虽然两种功能一样但是当方法比较复杂时性能就回出现明细差异

当需要重复调用一个属性时使用计算属性推荐使用计算属性,计算属性最好当成只读,需要修改时直接修改数据源而不是修改计算属性。

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值