zoukankan      html  css  js  c++  java
  • vue2.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-if

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

            v-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度

     

     

     3. 事件的销毁

     Vue 组件销毁时,会自动清理其相关的实例连接,和自身的指令及事件监听器,但是仅限于组件本身的事件。

    如果在 js 内使用 addEventListene 等方式是不会自动销毁的,因此需要在组件销毁时 手动移除这些事件的监听,以免造成内存泄露,

    // 监听的事件(click,mouseover,mouseout...)  // 注册的 setInterval setTimeout

      created() { 
        addEventListener('click'this.clickfalse)
      },
      beforeDestroy() {
        removeEventListener('click'this.clickfalse)
      }
    
    
    • created() {
    • addEventListener('click', this.click, false)
    • },
    • beforeDestroy() {
    • removeEventListener('click', this.click, false)
    • }
  • 相关阅读:
    Delphi DataSnap入门操作,动起来
    Delphi 记录Record和字符串String相互赋值
    转载:JAVA每天学习
    转载:IntelliJ IDEA 的使用方法总结
    合并多个txt
    如何用vosviewer进行时间线分析——结合pajek
    链路预测(一)
    【js】百分比保留两位小数
    【基础】float保留两位小数
    【js】鼠标悬停显示信息
  • 原文地址:https://www.cnblogs.com/zhaozhenzhen/p/14149845.html
Copyright © 2011-2022 走看看