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)
-
}