【uni-app】vue长列表性能优化

前言，本人业余开发者而已。对于vue懂得比较基础。

经历：我在加载一个长列表。每次加载50条数据。基本上无限次数加载。可以在移动端感觉出明显的卡顿

下面是我的优化

1. 图片必须懒加载，是否懒加载蛮明显的。
   图片懒加载也要优化好。例如onPageScroll事件中就可以使用函数节流手段。【0.2秒只触发一次】

2. 我尽量采用css的background-background-image: url(); 而不使用 vue的image标签。具体我个人认为。image标签会被编译为这样子的结构。理论上更复杂的结构，耗能更大

3. 从原理上剖析，每次data里面定义的变量【且在视图区被调用的变量】发生变动，整个视图区都会重新计算。如果你向v-for的数据尾部拼接了数据，那么原数据前面的数据也会循环计算【但是直接计算，不会覆盖到视图区】。

   把比方。原数据100条，你拼接了50条数据在数组尾部。整个视图区会重新计算。循环区域会计算150次。
   虽然说前0-100只是计算，并不会覆盖的视图区。但是计算它也吃内存是吧

   有的人可能会说，给v-for设置:key不就可以了吗。并不是的

   另外有的人认为key的值不能使用index，而是需要使用itme[‘id’]。其实并不是的，如果你的数组不会修改，或者索引不会修改，你大可以使用index就行了

4. 每个v-for使用自定义组件。这样再更新100-150条数据的时候。第0-100条数据是不会更新的。具体原理我也不知道

5. 尽可能优化视图结构，别套来套去的

PS: 无论你写什么，尽可能把不需要出现的视图中的变量写在其他地方（指自定义组件）。以免视图区重新计算