知食记
搜索文档…
🕹️框架
🎯算法
🤖开源
Group 1
长列表性能优化
使用Object.freeze优化Vue中的不需要响应式监听的数据
在2.x版本中
Vue会通过Object.defineProperty对数据进行劫持, 以实现双向数据绑定. 但在一些特定的业务场景, 组件只需要进行纯数据展示, 不会有任何变化, 此时我们可能不需要Vue对来数据进行劫持. 在大量数据需要进行呈现时, 如果禁止Vue对数据进行劫持, 会明显减少组件初始化的时间.
1
export default {
2
data: () => ({
3
userList: []
4
}),
5
async created() {
6
const userList = await this.$service.get("/getuserList");
7
this.userList = Object.freeze(userList);
8
}
9
};
Copied!
使用
Object.freeze后，Vue的双向数据绑定实效，这也就是带来性能提升的原因。复制链接