[Vue] 性能优化1 - freeze
需要展示一个长列表，只是单纯展示，不涉及数据改变，这个时候如何去优化性能？
vue在初始化的时候会遍历data中的数据，通过Object.defineProperty()为每个数据设置setter和getter方法，这个过程非常耗费性能。
既然无需变化，那就不需要数据变为响应式，即不需要让Vue来进行遍历操作。
可用方法有两种:
1、Object.freeze冻结对象
template部分![[Vue] 性能优化1 - freeze](https://img.it610.com/image/info9/6780db418488451b9d3f07029db91ef4.jpg)
文章图片
data部分![[Vue] 性能优化1 - freeze](https://img.it610.com/image/info9/4d01354cb68940d585dc29e6baa78afd.jpg)
文章图片
methods部分![[Vue] 性能优化1 - freeze](https://img.it610.com/image/info9/ea8a80aa1a684d9199423832684f038f.jpg)
文章图片
2、不将数据放置到data中，而是放置于与data/methods/computed同级，而后template中用$options来获取数据。
template部分![[Vue] 性能优化1 - freeze](https://img.it610.com/image/info9/c8c2d89791ec4c5ab8327261eb3bd983.jpg)
文章图片
数据 和 方法部分![[Vue] 性能优化1 - freeze](https://img.it610.com/image/info9/10c776bcbc9a4816af25f4e0f0c13400.jpg)
文章图片
【[Vue] 性能优化1 - freeze】同步更新到自己的语雀
https://www.yuque.com/diracke...
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 数据库设计与优化
- VueX--VUE核心插件
- Improve|Improve Nested Conditionals（优化嵌套的条件语句） 面对大量的if-else语句
- 首屏时间，你说你优化了，那你倒是计算出给给我看啊！
- vue组件中为何data必须是一个函数（）
- 数据库|SQL行转列方式优化查询性能实践
- 用npm发布一个包的教程并编写一个vue的插件发布
- 性能测试中QPS和TPS的区别