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.click, false)

  },

  beforeDestroy() {

    removeEventListener('click', this.click, false)

  }

created() {




  addEventListener('click', this.click, false)




},




beforeDestroy() {




  removeEventListener('click', this.click, false)




}