码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.0性能优化

时间:2020-12-22 12:20:41      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:def   desc   状态   for   性能   bsp   可见   com   key   

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 。

 

 

 

 

 

 

vue2.0性能优化

标签:def   desc   状态   for   性能   bsp   可见   com   key   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!