vue学习笔记21-25(计算属性)

vue学习笔记21-25(计算属性)

vue中的计算属性(computed)

1、什么是计算属性
注:计算属性的命名规范,它首先是一个属性,所以最好按照一个属性来进行命名,使用名词进行命名,不要加入动词。
再注:在mustache语法中不要加上小括号,因为这是属性而不是函数,例子:<h2>{{fullName}}</h2>
2、作用
对要是用的数据首先进行一定的处理,方便使用,简化上方mustache中的内容,增强可读性。
3、使用举例
①简单使用(只读属性)
简单实用只使用了其中的getter用法,省略setter用法并进行简写,直接写上一个函数(和methods里面一样)
例子:

conputed{
  totalPrice, function(){
    let result = 0
    for (let item of this.books){
      result += item.price
    }
    return result
  }
},

②完整使用(可读写属性)
将getter和setter完整实现,getter通过计算获得想要获得的属性值,setter多对原始数据(也就是data中的数据)进行修改

computed: {
  fullName: {
    // 进行修改的时候只需要app.fullName = 'hello VueJs'即可(app是new vue的名字)
    set: function (newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    },
    get: function () {
      return this.firstName + ' ' + this.lastName;
    },
  }
},

4、与methods相比,为什么使用computed:
computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。 也就是说使用computed的性能会优于methods。
所以在简单地把数据进行计算在进行展示的时候,最好多使用computed计算属性,少使用methods,这样能提高系统的效率。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值