在 Vue.js 2 中使用冻结对象提升效率

前言

假设组件需要处理并渲染100万条数据（这是一个极端情况）。当你点击按钮发送请求后，页面可能会突然卡顿一段时间。如果你使用性能分析工具查看，会发现最耗费时间的不是渲染本身，而是 Vue.js 在遍历每一条数据时，将普通对象转换为响应式对象所造成的开销。


为什么使用冻结

• 侵入性小。

• 优化手段的应用范围广。

• 效果极佳。

解决方案

<script>
export default {
  data() {
    return {
      items: []
    }
  }.
  methods: {
  	loadItems() {
      ...
      this.items = Object.freeze(response...)
    }
	}
}
</script>