使用Key
- 对于通过循环生成的列表,应该给列表每一项一个稳定且唯一的key,这个有利于在列表变动时,尽量减少删除,新增,改动元素。
使用冻结的对象
- 冻结的对象不会被响应化,应用场景(当一个列表无需变化时可以使用)
使用函数式组件
- 在模板中 添加 functional标记 在js中添加functional为true 表示 应用场景(只作纯渲染)
使用计算属性
- 如果模板中某个数据会使用多次,并且该属性是通过计算得到的,使用计算属性以缓存他们
非实时绑定表单项
- 当使用v-model绑定一个表单时,当用户改变表单项的状态时,也会随之改变数据,从而导致vue发生重新渲染(rerender),这会带来一些性能开销。
我们可以通过使用lazy或不使用v-model的方式解决该问题,但要注意,这样可能会导致某一时间段内数据和表单项是不一致的
保持对象引用稳定
使用延迟装载defer
- JS传输完成后,浏览器开始执行js构造页面但可能一开始要渲染的组件太多,不仅js执行的时间很长,而且执行完后浏览器要渲染的元素过多,从而导致页面白屏 延迟装载本质就是利用 requestAnimationFrame 事件分批渲染内容
清除生产环境console.log
- 避免浏览器无法回收内存 导致内存泄漏
babel-plugin-transform-remove-console
babel.config.js
plugins: [
"transform-remove-console"
]