博客
关于我
VUE计算属性computed的get和set / 过滤 /存储数据
阅读量:778 次
发布时间:2019-03-24

本文共 1752 字,大约阅读时间需要 5 分钟。

computed计算属性与数据处理优化

在Vue.js开发中,computed属性是解耦双向绑定核心逻辑的一种强大工具。本文将从computed属性的基本用法、数组操作到数据持久化等方面进行详细讲解。

一、computed计算属性

computed属性允许我们将商业逻辑与视图层解耦,使代码结构更加清晰。通过定义getter和setter,computed属性能够实时反映数据改变,或者根据逻辑计算出的值来控制前后端数据的变化。

一个经典的使用场景是复杂的筛选条件。比如:

我们可以通过computed属性来实现全选/全不选功能:

computed: {    checkAllBox: {        get() {            return this.listsSize === this.lists.length && this.listsSize > 0;        },        set(value) {            this.checkList(value);        }    }}

这段代码中,get函数根据选中的状态来判断是否全部选择,set函数则根据选中的状态调用checkList方法来改变数据。这种设计模式能够显著简化视图层的逻辑式,但仍需注意computed属性较为依赖于数据的深度监视,避免频繁触发依赖解析过程。

二、过滤与删除数组元素

在前一个示例中提到的基础上,我们需要实现删除被选中的数据的功能。可以通过以下方法实现:

cripple 
data() { return { lists: [ { title: '一', complain: false }, { title: '二', complain: false }, { title: '三', complain: true } ] }; }, deleteComplain() { // 定义过滤器,删除状态为false的选项 this.lists = this.lists.filter( list => list.complain === false ); // 调用该方法 this.deleteComplain(); }

通过filter方法,可以轻松地在数据绑定内 اصلاح数组状态,确保视图与状态保持一致。

三、计算被选中的数量

计算被选中的问题,可以通过reduce方法高效实现:

listsSize() {     // 统计状态为true的数据总数     return this.lists.reduce( (preTotal, list) => preTotal + (list.complain ? 1 : 0), 0 ); }

该方法简洁且高效,直接暴露在组件 层,且无需额外依赖安装。

四、数据持久化与脱耦

为了实现数据持久化,我们可以使用localStorage。这种方式适用于需要在不同页面间数据持久化的情况。

1、读取数据

localStorage.getItem('todos_key')

注意:如果第一次存储前未初始化,需设置默认值:

localStorage.getItem('todos_key') || '[]'

2、使用JSON.parse转换

const data = JSON.parse(localStorage.getItem('todos_key') || '[]');

这样处理后,即使存储结果为null,也可以正确解析为数组初始值。

3、深度监视

为了确保数据更新到localStorage,我们需要使用Vue的depth监视:

this.$watch('lists', {    deep: true,    handler(value) {        localStorage.setItem('todos_key', JSON.stringify(value));    } });

这种实现方式的效率很高,只在数据发生改变时触发存储操作。

转载地址:http://hsrkk.baihongyu.com/

你可能感兴趣的文章
MySQL中的ON DUPLICATE KEY UPDATE详解与应用
查看>>
mysql中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
查看>>
mysql中的undo log、redo log 、binlog大致概要
查看>>
Mysql中的using
查看>>
MySQL中的关键字深入比较:UNION vs UNION ALL
查看>>
mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
查看>>
mysql中的字段如何选择合适的数据类型呢?
查看>>
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>
mysql中穿件函数时候delimiter的用法
查看>>
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>
Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
查看>>
Mysql中视图的使用以及常见运算符的使用示例和优先级
查看>>
Mysql中触发器的使用示例
查看>>
Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
查看>>