Vue中不需要响应式的数据该如何处理？

对于Vue的响应式大家应该都有所了解，通过getter和setter来实现数据的订阅和分发。我们在实际使用中可能会遇到这样一个场景，就是Vue组件的data部分的数据会非常多，可能数据来到了数千上万条甚至是十来万，这时页面会变得非常卡顿。关于Vue的性能优化中有这样一条：复杂(数据庞大或结构复杂)的对象数据不要放在Data中，这是因为Vue对深度遍历data独享的属性并依次添加getter和setter，以此达到响应式的目的。既然知道原因就好做了，我们可以根据这个问题给出几种解决方案：

1. 数据放在vue实例外

const test = ['1', '2', '3']
export default {
// options
}

弊端: vue template中访问不到数据

2. created, mounted钩子函数中定义

created() {
    // 注意data中不要声明该变量名
    this.testData = 'testData'
}

3. 自定义Options

<template>
  <div>{{ $options.myOptions.test }}</div>
</template>
复制代码export default {
    data() {
    },
    // 自定义options和data同级
    // 取值时: this.$options.myOptions.test
    myOptions: {
        test: '111'
    }
}

4. Object.freeze()
冻结对象,禁止对该对象的属性进行修改。这个方法返回传递的对象，而不是创建一个被冻结的副本

总结: 不需要响应式的数据务必不要挂在data上, 添加getter和setter影响性能, 如第三方库, 定时器, 常量等