获取的数据有些是非常庞大的,如果将该数据全部都设置成响应式的,也是对性能的一种损耗
在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
不是响应式的则没有