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)
    • }
  • 相关阅读:
    逆光拍摄常见的问题(解决大光比问题)
    HDP和包围曝光
    直方图
    linux查找文件的命令【转】
    100篇大数据文章[转]
    squid
    修改/etc/resolv.conf又恢复到原来的状态?[转]
    python字符串及正则表达式[转]
    GraphLab介绍[转]
    Scala 中的 apply 和 update 方法[转]
  • 原文地址:https://www.cnblogs.com/zhaozhenzhen/p/14149845.html
Copyright © 2011-2022 走看看