vue2.0性能优化

时间：2020-12-17 17:24:27 阅读：21 评论：0 收藏：0 [点我收藏+]

1. Object.freeze()提升表格性能

　Vue 初始化时会遍历 Vue 实例中 data对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的

Vue为了双向数据绑定会给每个属性添加get和set 方法 ,但在列表数据中不需要响应式数据,添加get和set方法只会消耗性能,

在Vue源码中 defineReactive 方法是专门定义get和set ,里面的 configurable 属性为false 时不会添加set和get方法

下面看一下2000条数据冻结和非冻结的区别(快了将近10倍)

对比可以看出，使用了 Object.freeze() 之后，减少了 observer 的开销

调试步骤:

技术分享图片

demo

技术分享图片

Object.freeze使用 ( Object.isFrozen(json.model) 和 Object.getOwnPropertyDescriptor(json,"model") 都可以判断是否冻结成功)

技术分享图片

2. v-for 遍历必须为 item 添加 key

使用v-for 遍历时需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

原文：https://www.cnblogs.com/zhaozhenzhen/p/14149845.html

踩

(0)

评论一句话评论（0）

分享档案

更多>