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/

你可能感兴趣的文章