参考自: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. hdu 3874 树状数组

    思路:和求区间内有多少个不同的数一样,只不过改下权值. #include<iostream> #include<cstdio> #include<algorithm> ...

  2. 【WC2019笔记】IOI2018 / ACM题目选讲

    哇!济南的 rqy 大佬讲课!就是 $luogu$ 上有名的那位! 上面这句话写错了,请大家无视 XylophoneIOI2018 练习赛 T2题意:交互提有一个 $0\sim n-1$ 的排列,保证 ...

  3. nodejs安装教程

    http://www.runoob.com/nodejs/nodejs-install-setup.html nodejs官方下载,之后配置环境path,npm随着nodejs安装,自动安装 查看no ...

  4. jquery 获取被点击元素的id属性值

    有时候可能需要获取被点击元素的一些信息,此处就以id属性为例子,进行演示一下. $(document).click(function (e){ var v_id=e.target.id; consol ...

  5. javaScript 笔记(4) -- 弹窗 & 计时事件 & cookie

    弹窗 可以在 JavaScript 中创建三种消息框:警告框.确认框.提示框. 警告框:经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: window ...

  6. pat 团体天梯 L3-011. 直捣黄龙

    L3-011. 直捣黄龙 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 本题是一部战争大片 —— 你需要从己方大本营出发,一路 ...

  7. Linux继续学习笔记

    本篇文章是慕课网<Linux达人养成计划2>笔记. 第一章 VIM文本编辑器 VI : Visual Interface (可视化接口) VIM: 在VI的基础上进行的升级,相比于VI有一 ...

  8. MySql视图笔记(转载)

    1.       视图的定义 视图就是从一个或多个表中,导出来的表,是一个虚拟存在的表.视图就像一个窗口(数据展示的窗口),通过这个窗口,可以看到系统专门提供的数据(也可以查看到数据表的全部数据),使 ...

  9. git的使用学习(八)自定义git

    在安装Git一节中,我们已经配置了user.name和user.email,实际上,Git还有很多可配置项. 比如,让Git显示颜色,会让命令输出看起来更醒目: $ git config --glob ...

  10. NGINX配置获取CloudFlare 下的访客真实IP并记录到日志

    我用的是lnmp.org的环境 /usr/local/nginx/conf/nginx.conf 在 http { } 部分增加 map $HTTP_CF_CONNECTING_IP $clientR ...