Vue中从不修改的数据如何处理？

为什么不需要修改的数据要特殊处理？

        在我们日常开发过程中，可能会存在一些前台写死的数据，比如某些下拉框数据、单选框租数据等，此时我们无需vue内部将它处理为响应式的对象，如果此类数据也被处理为响应式对象，这无疑会加大内存的开销（vue中会遍历data中return出来的对象key进行响应式处理），影响页面响应速度。

如何处理？

        1、调用Object.freeze()方法处理不需要改变的数据。

        Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

data(){
    return{
        stateList:Object.freeze([{xxxx:xxxx},{xxxx:xxxx}])  //冻结数组
        obj:Object.freeze({xxx:xxx}) // 冻结对象
    }
}

        2、既然vue内部是遍历data中rerurn出来的对象key，将其处理成响应式对象，那么，我们将不需要修改的数据放在data的return对象外定义，自然也就解决了上述问题。

<script>
    //定义不需要响应式处理的数据
    const stateSlist = [{xxxx:xxxx},{xxxx:xxxx}]
    const = {xxx:xxx}
    export default{
        data(){
            return{
                //需要响应式处理的数据
            }
        }
    }
</script>