参考自: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. BZOJ2121 字符串游戏 【dp】

    题目链接 BZOJ2121 题解 dp怎么那么神呐QAQ 我们要求出最小字符串长度 我们设一个\(dp[i]\)表示前\(i\)个字符最后所形成的最短字符串长度 对于第\(i\)个字符,要么保留,就是 ...

  2. 《插件》一个比较好用的 chrome浏览器的json格式化插件

    插件名: JSON-Handle   下载地址:         http://jsonhandle.sinaapp.com/ 插件下载后,在浏览器输入:chrome://extensions/ 将下 ...

  3. HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

  4. BZOJ 3513: [MUTC2013]idiots

    3513: [MUTC2013]idiots Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 476  Solved: 162[Submit][Stat ...

  5. 【HDOJ5528】Count a * b(积性函数)

    题意:设f(i)为0<=x,y<=i-1且xy%i=0的(x,y)对数,g(i)为sigma f(j) [i%j==0] 给定n,求g(n),答案对2^64取模 T<=2e4,n&l ...

  6. 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

    [背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...

  7. AtCoder Regular Contest 077 E - guruguru 线性函数 前缀和

    题目链接 题意 灯有\(m\)个亮度等级,\(1,2,...,m\),有两种按钮: 每次将亮度等级\(+1\),如\(1\rightarrow 2,2\rightarrow 3,...,m-1\rig ...

  8. 嵌入式 Linux线程锁详解pthread_mutexattr_t【转】

    转自:http://blog.sina.com.cn/s/blog_8795b0970101il6g.html 在Posix Thread中定义有一套专门用于线程同步的mutex函数. . 创建和销毁 ...

  9. 解决mariadb数据库服务无法开启

    我的系统Manjaro linux,安装的数据库为mariadb 10.1 1.安装数据库 pacman -S mariadb 2.配置数据库启动环境: mysql_install_db --user ...

  10. 老郭带你学数据结构(C语言系列)2-线性表之动态顺序表

    一.基本概念: 线性表:由n个类型相同的数据元素组成的有限序列,记为(a1,a2,--an). 线性表的特征:其中的元素存在这序偶关系,元素之间存在着严格的次序关系. 顺序存储表:线性表中的元素依次存 ...