zhaobinglong
commented
3 years ago 子组件分担渲染任务
长列表在数据量很大的情况下，每次操作完原数组后，原数组list发生变化，会重新走一遍v-for进行页面重绘渲染，效率低下。写一个单独的组件，将数组list中的每一个对象传给子组件(Operate.vue)，组件用props接受到后，之后只操作传过来的这个对象，不改变原数组list中的任何值；备注：这里为将一个数组变为两个，一个为 listOriginal 仅做初次渲染使用，另外一个listOperate 在组件回调后操作，用来做渲染之外的业务处理。这样页面渲染和业务操作通过子组件达到互补干扰的效果，页面也会极其流畅了。
实例
<template>
<div class="optimize">
优化列表
<ul>
<Operate v-for="(item,index) in listOriginal" :item="item" :index="index" :key="index"></Operate>
</ul>
</div>
</template>
// 子组件
<template>
<li class="operate">
<img :src="item.img" />
<div class="left_bottom">
<p>{{item.name}}</p>
<p><span v-if="item.num > 0">{{item.num}}整份</span><span v-if="item.num > 0">{{item.num}}半份</span></p>
<span class="add btn" @click="add(index)">+</span>
<span class="num">{{item.num}}</span>
<span class="reduce btn" @click="reduce(index)">-</span>
</div>
</li>
</template>
<script>
export default {
name: 'operate',
data() {
return {}
},
props: ["item", "index"],
methods: {
// 子组件承担数据的渲染和业务交互
add(index) {
let t = this;
t.item.num++;
//t.$emit(...);//回调操作父组件listOperate，或者处理其他业务均可
},
reduce(index) {
let t = this;
t.item.num > 0 ? t.item.num-- : 0;
//t.$emit(...);//回调操作父组件listOperate，或者处理其他业务均可
}
}
}
</script>参考
https://blog.csdn.net/weixin_34178244/article/details/88028856
数据冻结Object.freeze
vue 会通过 object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间。所以，我们可以通过 object.freeze 方法来冻结一个对象，这个对象一旦被冻结，vue就不会对数据进行劫持了。
demo