vue Object.freeze() 优化
参考自: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() 优化的更多相关文章
- vue项目性能优化(路由懒加载、gzip加速、cdn加速)
前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...
- 【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...
- Vue常用性能优化
Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...
- Object.freeze(); 方法冻结一个对象。
Object.freeze() 方法可以冻结一个对象.一个被冻结的对象再也不能被修改: 冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性 ...
- ES5 对象的扩展(Object.preventExtensions)、密封(Object.seal)和冻结(Object.freeze)
前面提到 ES5 对象属性描述符,这篇看看对象的扩展.密封和冻结. 扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal ...
- ES5特性之Object.freeze
Object.freeze方法比Object.seal方法更严格,不仅不能扩展新对象和不可重新配置属性的特性,还不能改变对象属性的值writable(不可写)
- [Javascript] Object.freeze() vs Object.seal()
let person = { firstName: "Zhentian", lastName: "Wan" }; /*Object.freeze() makes ...
- 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 ...
- javascript EcmaScript5 新增对象之Object.freeze
我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变 ...
随机推荐
- POJ 2376:Cleaning Shifts(贪心)
题目大意:有n个奶牛,他们负责在长为t个时间点的时间内值班,每个时间点至少有一个在值班,每个奶牛有一段空闲时间可以值班,求满足要求所需最少奶牛数量,无法满足则输出-1. 分析: 将奶牛空闲时间段看成线 ...
- apt-get 更换源
环境:Ubuntu 准备环境 apt-get 更换源 cd /etc/apt sudo apt-get install vim sudo vim sources.list deb http://mir ...
- BZOJ3571 [Hnoi2014]画框 【分治 + KM算法】
题目链接 BZOJ3571 题解 如果知道最小乘积生成树,那么这种双权值乘积最小就是裸题了 将两权值和作为坐标,转化为二维坐标系下凸包上的点,然后不断划分分治就好了 这里求的是最小匹配值,每次找点套一 ...
- BZOJ2555 SubString 【后缀自动机 + LCT】
题目 懒得写背景了,给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支持这些操作. 输入 ...
- Codeforces Round #361 (Div. 2) B bfs处理
B. Mike and Shortcuts time limit per test 3 seconds memory limit per test 256 megabytes input standa ...
- Android注入完全剖析
0 前沿 本文主要分析了一份实现Android注入的代码的技术细节,但是并不涉及ptrace相关的知识,所以读者如果不了解ptrace的话,最好先学习下ptrace原理再来阅读本文.首先,感谢源代码的 ...
- 各种 Python 实现的简单介绍与比较
当谈到Python时,一般指的是CPython.但Python实际上是一门语言规范,只是定义了Python这门语言应该具备哪些语言要素,应当能完成什么样的任务.这种语言规范可以用不同的方式实现,可以用 ...
- 【01】npm/cnpm安装
包安装相关信息: 1.node_modules文件夹 node_modules文件夹在nodejs中是一个特殊的文件夹,通过它的名字就可以看出,该文件夹也是用于存放node模块.如果一个模块表达式不是 ...
- RazorExtensions Templated Razor Delegates
原文发布时间为:2011-04-27 -- 来源于本人的百度文章 [由搬家工具导入] Templated Razor Delegates David Fowler turned me on to a ...
- centOS 7 安装java sdk 并测试是否安装成功
CentOS 6.X 和 7.X 自带有OpenJDK runtime environment (openjdk).它是一个在linux上实现开源的Java 平台. 安装方式: 1.输入以下命令,以 ...