参考自:https://segmentfault.com/a/1190000006191558

Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。

vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换

如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。

并且,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉。举个例子:

<p v-for="item in list">{{ item.value }}</p>
new Vue({
data: {
// vue不会对list里的object做getter、setter绑定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
mounted () {
// 界面不会有响应
this.list[0].value = 100; // 下面两种做法,界面都会响应
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})

vue Object.freeze() 优化的更多相关文章

  1. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

  2. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  3. Vue常用性能优化

    Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...

  4. Object.freeze(); 方法冻结一个对象。

    Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改: 冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性 ...

  5. ES5 对象的扩展(Object.preventExtensions)、密封(Object.seal)和冻结(Object.freeze)

    前面提到 ES5 对象属性描述符,这篇看看对象的扩展.密封和冻结. 扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal ...

  6. ES5特性之Object.freeze

    Object.freeze方法比Object.seal方法更严格,不仅不能扩展新对象和不可重新配置属性的特性,还不能改变对象属性的值writable(不可写)

  7. [Javascript] Object.freeze() vs Object.seal()

    let person = { firstName: "Zhentian", lastName: "Wan" }; /*Object.freeze() makes ...

  8. ECMA5.1中Object.seal()和Object.freeze()的区别

    1  Object.seal(O)的调用 When the seal function is called, the following steps are taken:   If Type(O) i ...

  9. javascript EcmaScript5 新增对象之Object.freeze

    我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变 ...

随机推荐

  1. BZOJ 1050: [HAOI2006]旅行comf(枚举+并查集)

    [HAOI2006]旅行comf Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点 ...

  2. 【bzoj1415】[Noi2005]聪聪和可可 期望记忆化搜索

    题目描述 输入 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行 ...

  3. windows通过NSF挂载centos目录

    windows通过NSF挂载centos目录 来源: http://blog.csdn.net/u012955038/article/details/77151346 CentOS 配置 1.安装NF ...

  4. [NOI2012][bzoj2879] 美食节 [费用流+动态加边]

    题面 传送门 思路 先看看这道题 修车 仔细理解一下,这两道题是不是一样的? 这道题的不同之处 但是有一个区别:本题中每一种车有多个需求,但是这个好办,连边的时候容量涨成$p\lbrack i\rbr ...

  5. 文件处理.Windows.Fastcopy.3.50.x64.文件复制简体中文破解版(验证版)

    摘要:Fastcopy 3.50 + x64 绿色汉化中文版由知索网汉化发布.Fastcopy 是一款来自日本的最快的文件拷贝工具.磁盘间相互拷贝文件是司空见惯的事情,通常情况都是利用 WINDOWS ...

  6. Python Spider

    一.网络爬虫 网络爬虫又被称为网络蜘蛛(

  7. sql语句中的[]中括号(转)

    下面有关sql语句中[]的信息适用于Sql Server.Access等多种数据库. 1.sql语句中加[]是为了防止歧义,避免与系统保留关键字冲突,使计算机能识别.sql语句中有些字段可能是关键字, ...

  8. C# 加载图片image --(C#)Image.FromFile 方法会锁住文件的原因及可能的解决方法

    Image.FromFile 一旦使用后,对应的文件在一直调用其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图形被解锁前无法对图像进行操作(比如删除,修改等 ...

  9. Google的新一代一致性哈希算法

    先看到了一篇中文文章:谷歌退出有界负载的一致性哈希算法 然后找到了它对应的英文原文 以及它的英文paper,24页 又找到一篇博客,发现已经有人将它在haproxy上实现了,haproxy1.7.5上 ...

  10. CRB and Candies LCM 性质

    题目 CRB and Candies 题意 \[ \text{给定正整数N,求} LCM \lbrace C \left(N , 0 \right),C\left(N , 1 \right),..., ...