vue实际运用五：不需要响应式的数据的处理

原创已于 2022-01-21 14:49:39 修改 · 6.2k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue设置非响应式数据

收录于

于 2021-12-23 11:16:05 首次发布

vue基础知识专栏收录该内容

7 篇文章

订阅专栏

本文介绍在Vue开发中如何处理那些始终不变的‘死数据’，以减少不必要的响应式处理，从而达到优化应用性能的目的。文章提供了两种有效的方法：将数据定义在data之外及使用Object.freeze()。

不需要响应式的数据的处理

在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }