面试题 - vue常见优化手段

[tiantingrui]

1. 使用key

对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素

[tiantingrui]

2. 使用冻结对象

冻结的对象不会被响应化

[tiantingrui]

3. 使用函数式组件

[tiantingrui]

4. 使用计算属性

如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们

[tiantingrui]

5. 非实时绑定的表单项

当使用 `v-model` 绑定一个表单项时，当用户改变表单项的状态时，也会随之改变状态，从而导致`vue`发生重渲染（`renderer`）, 这会带来一些性能的开销。
我们可以通过使用 `v-model.lazy` 或不使用`v-model`的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。

[tiantingrui]

6. 使用 v-show 替代 v-if

对于频繁切换显示状态的元素，使用`v-show`可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要。
关键词：频繁切换显示状态，内部包含大量dom元素

[tiantingrui]

7. 使用延迟装载 （defer）

JS传输完成后，浏览器开始执行JS构造页面。
但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏
一个可行的办法就是 `延迟装载组件`，让组件按照指定的先后顺序依次一个一个渲染出来

延迟装载是一个思路，本质上就是利用 requestAnimationFrame事件分批渲染内容，它的具体实现多种多样0

[tiantingrui]

8. 使用 keep- alive

[tiantingrui]

9. 长列表优化

[tiantingrui]

10. 打包体积优化