获取大量数据,怎么实现该数据的性能优化

文章讨论了在Vue应用中,如何通过避免将大量数据直接设置为响应式来优化性能。通过从大数组中筛选小数组并仅在data中定义小数组,可以减少响应式带来的性能损耗。非响应式的totalList示例说明了这种优化方法。
摘要由CSDN通过智能技术生成

获取的数据有些是非常庞大的,如果将该数据全部都设置成响应式的,也是对性能的一种损耗

在data中定义的数据都是响应式的,所谓的响应式就是vue帮我们监控对象的变化,只要变了就自动更新视图,所以是需要消耗性能的

如何实现性能优化

当获取大量的数据时,只要这时候从大数组中筛选出需要的小数组,让该小数组在data中定义(响应式),就是性能优化

例如:

data(){
        return{
            // 在data中定义的数据都是响应式的
            // 所谓的响应式就是vue帮我们监控对象的变化,只要变了就自动更新视图,所以是需要消耗性能的
            // totalList:[],
            littleList:[]
        }
    },
    create(){
        this.get()
    },
    methods:{
        async getCateList(){
            const {message}=await uni.$u.http.get('https://goods/datas')
            // totalList没有在data中定义,所以它不是相应式的
            this.totalList=message
            // 从大数组中筛选出我们需要的小数组,就是性能优化了
            this.leftList=message.map(item=>({id:item.id,name:item.name}))
            console.log('totalList',this.totalList);
            console.log('littleList',this.littleList);
        }
    }

在此两个数组totalList和littleList,因为totalList没有在data中定义,所以totalList不是响应式的

通过打印我们会发现

响应的数据有 _ob_:Oserver

image.png

不是响应式的则没有

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值