美文网首页
计算属性的相关运用

计算属性的相关运用

作者: 郑馋师 | 来源:发表于2020-03-04 11:29 被阅读0次

之前有写过一篇博客讲计算属性的学习,项目里有用到计算属性所以也就一起讲讲在ts里面怎么用,主要是避免改变一个其他不变的情况

 get recordList() {
      return store.recordList;
    }
  get groupedList() {
      const {recordList} = this;
      if (recordList.length === 0) {return [];}

      const newList = clone(recordList)
        .filter(r => r.type === this.type)
        .sort((a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf());
      type Result = { title: string; total?: number; items: RecordItem[] }[]
      const result: Result = [{title: dayjs(newList[0].createdAt).format('YYYY-MM-DD'), items: [newList[0]]}];
      for (let i = 1; i < newList.length; i++) {
        const current = newList[i];
        const last = result[result.length - 1];
        if (dayjs(last.title).isSame(dayjs(current.createdAt), 'day')) {
          last.items.push(current);
        } else {
          result.push({title: dayjs(newList[0].createdAt).format('YYYY-MM-DD'), items: [current]});
        }
      }
      result.map(group => {
        group.total = group.items.reduce((sum, item) => sum + item.amount, 0);
      });
      return result;
    }

我在这里是有用到计算属性,而且在ts里面用法有些不同,直接get xxx就可以得到计算属性xxx了,它最主要的好处就是可以根据依赖缓存,从而节省内存,非常好用

相关文章

  • 计算属性的相关运用

    之前有写过一篇博客讲计算属性的学习,项目里有用到计算属性所以也就一起讲讲在ts里面怎么用,主要是避免改变一个其他不...

  • VUE学习笔记

    计算属性 计算属性只有在它的相关依赖发生改变时才会重新求值,计算属性是基于它们的依赖进行缓存的 数组和对象更新 数...

  • [记录用]vue文档阅读要点笔记

    计算属性和侦听器 计算属性缓存 vs 方法 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时...

  • swift--类

    类的属性 1.存储属性:存储常量和变量 2.计算属性:通过某种方式计算出来的属性 3.类的属性:与整个类目相关联的...

  • Swift语法 -- [08 - 属性]

    1. 存储属性&计算属性 Swift中跟实例对象相关的属性可以分为2大类 存储属性(Stored Property...

  • vue计算属性的原理

    之前一直很喜欢计算属性,现在找了相关文档,整理了一份关于计算属性的原理文章计算属性是一个很邪门的东西,只要在它的函...

  • Swift5.1学习随笔之属性

    swift中跟实例相关的属性可以分为2大类 1、存储属性(Stored Property)2、计算属性(Compu...

  • z-index的使用

    1.Z-index的运用是需要条件的,与其相关的属性就是position属性。当设置position:static...

  • Swift 属性(Properties)详解

    属性将值与特定类,结构或枚举相关联; 存储和计算属性通常与特定类型的实例相关联。但是属性也可以和类型本身相关联(类...

  • 1.label ~ input checkbox样式更改

    选择器的运用 HTML 思路:input框让其display:none,运用label相关标记标签的属性来占位,自...

网友评论

      本文标题:计算属性的相关运用

      本文链接:https://www.haomeiwen.com/subject/sxrmlhtx.html