参考自: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. 201621123034 《Java程序设计》第1周学习总结

    1. 本周学习总结 知道了java的用途有安卓手机应用,企业服务器后端,java web.学到了新概念:类.HelloWorld.java 中 HelloWorld 是主文件名,区分 .java和 . ...

  2. FreeBSD利用 ports 來安裝軟體

    FreeBSD利用 ports 來安裝軟體   利用 ports 來安裝軟體 FreeBSD 的 ports 就是別人已經編譯過,安裝測試沒問題了,他們將軟體編譯時所需的組態設定.編譯程序及安裝程序, ...

  3. CSA Round 84 Mahattan Center

    题目 题目大意 给定平面上的 $n$ 个点和常数 $k$,求 $x$ 轴上的点 $p$ 到 $n$ 个点中距其最近的 $k$ 个点的距离之和的最小值.两点之间的距离定义为曼哈顿距离. 数据范围 $1\ ...

  4. BZOJ-3190 [JLOI2013]赛车

    转成二元一次不等式组,然后半平面交. #include <cstdlib> #include <cstdio> #include <cmath> #include ...

  5. webpack最佳入门实践系列(2)

    3.插件 在前端迅速发展的今天,许多没有太多技术含量并且感觉是在浪费时间的事情,就可以交给构建工具来做,例如:我们去手动创建index.html,手动引入打包好的js文件等操作,都可以叫个webpac ...

  6. linux之stat

    stat指令:文件/文件系统的详细信息显示: 使用格式:stat 文件名 stat命令主要用于显示文件或文件系统的详细信息,该命令的语法格式如下: -f 不显示文件本身的信息,显示文件所在文件系统的信 ...

  7. *UOJ#223. 【NOI2016】国王饮水记

    $n \leq 8000$的数列,问不超过$m \leq 1e9$次操作后第一个数字最大是多少.操作:选一些数,把他们变成他们的平均值.需要保留$p \leq 3000$位小数,提供了一个小数高精度库 ...

  8. SQL优化 ASP.NET ADO.NET

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] 总的考虑方向 1)        根据数据使用的方式来设计数据访问层 2)        缓存数据,避免不必要的操 ...

  9. HttpHandler,HttpApplication, HttpModule

    选择HttpHandler还是HttpModule? HttpHandler和HttpModule之间有什么差别 之所以有这个疑问,是因为在这二类对象中都可以访问Request, Response对象 ...

  10. [LeetCode] Trapping Rain Water 栈

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...