后台通常在使用Vue开发后台管理系统时，要用到大量的table等组件。通常我们会在项目中对这类组件进行二次封装，然后对表头的标题进行参数化配置，如下：exportdefault{data(){return{tableTitle:[{label:'Province',prop:'prop'},{label:'City',prop:'prop'},{label:'Summary',prop:'prop',colconfig:[{label:'下属',prop:'prop'}]}...]}}}这时候，如果表字段多，表头多，数据结构会比较复杂。如果是直接写在data里的话，会在组件初始化的时候递归重写这个对象的getset属性。源码如下：functiondefineReactive(obj,key,val){vardep=newDep();var属性=对象。getOwnPropertyDescriptor（对象，键）；//如果对象被冻结，直接跳出，无需重写getset方法if(property&&property.configurable===false){return}//observe会递归调用defineReactive重写对象内层的getset属性varchildOb=!shallow&&observe(val);Object.defineProperty(obj,key,{enumerable:true,configurable:true,get:functionreactiveGetter(){},set:functionreactiveSetter(newVal){}});但是这种静态数据不需要动态响应，必然会浪费性能，所以我们尽量避免这种不必要的性能浪费。方案一这时候我们可以使用Object.freeze()方法来冻结数据。vue组件在拦截数据中的属性时，会判断冻结对象不可修改【如上面代码注释】，会直接跳过getset的操作，这样vue组件的渲染时间就可以减少，页面性能可以提高。exportdefault{data(){return{tableTitle:Object.freeze(objConfig)}}}方案2把我们不需要动态响应的数据定义在创建的生命周期中，这样vue底层就不会拦截这个属性。exportdefault{created(){this.tableTitle=[xxxxx]}}综上所述，这种场景在开发中经常遇到。比如查询条件中有很多selectlist字段，我们也可以封装成一个大的json，然后避免在上面重写属性，这样可以减少很多性能开销
