开发者社区> 烟海之蓝> 正文

Object.freeze() 方法小记

简介: 在vue中的应用:如果你有一个巨大的数组或Object,并且确信数据不会修改,可以使用 Object.freeze() 方法冻结该数据,这样vue就不会对该对象的getter和setter做转换,从而让性能得以大幅提升。
+关注继续查看

在vue中的应用:如果你有一个巨大的数组或Object,并且确信数据不会修改,可以使用 Object.freeze() 方法冻结该数据,这样vue就不会对该对象的getter和setter做转换,从而让性能得以大幅提升。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <span v-for="item in list">{{item.name}}</span>
    </div>
    <script type="text/javascript" src="../../../js/lib/vue-2.5.21.js"></script>
<script>
    'use strict'
    new Vue({
        el: '#app',
        data() {
            return {
                list: Object.freeze([{
                    name: '1'
                }, {
                    name: '2'
                }])
            }
        },
        mounted() {
            this.list[0].name = '3' // 不会生效
              // 如果直接改变this.list 的引用,就会生效
              this.list = [{name: 4}] 
              // 或
              this.list = Object.freeze([{name: 4}])
        }
    })
</script>
</body>
</html>

Object.freeze()

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

var obj = {
  prop: function() {},
  foo: 'bar'
}
// 正常我们可以修改属性值或者删除属性
obj.foo = 'bas'
obj.lumpy = 'woof'
delete obj.prop

当obj被冻结后
var o = Object.freeze(obj)
o === obj // true

// 现在任何改变都会失效
obj.foo = '23' // 静默地不会做任何事,在严格模式下会抛出错误 TypeErrors
// 试图通过 Object.defineProperty 更改属性
// 下面两个语句都会抛出 TypeError.
Object.defineProperty(obj, 'ohai', { value: 17 });
Object.defineProperty(obj, 'foo', { value: 'eit' });

// 也不能更改原型
// 下面两个语句都会抛出 TypeError.
Object.setPrototypeOf(obj, { x: 20 })
obj.__proto__ = { x: 20 }

同样数组也会被冻结
let a = [0];
Object.freeze(a); // 现在数组不能被修改了.

a[0]=1; // fails silently
a.push(2); // fails silently

// In strict mode such attempts will throw TypeErrors
function fail() {
  "use strict"
  a[0] = 1;
  a.push(2);
}

fail();

冻结对象为浅冻结

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
4 0
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
6 0
分享一个开源的任务管理工具DooTask(支持私有部署)
分享一个开源的任务管理工具DooTask(支持私有部署)
5 0
新手利用阿里云服务器快速搭建网站指南
本篇通过简单明了的语言,以及简单的步骤,来介绍如何通过阿里云云服务器来快速搭建自己的网站。
7 0
利用JS筛选数组方法一
利用JS筛选数组方法一
6 0
利用JS筛选数组方法二
利用JS筛选数组方法二
5 0
利用JS实现猜数字小游戏
利用JS实现猜数字小游戏
6 0
Spring,Spring MVC,MyBatis,Hibernate总结
Spring,Spring MVC,MyBatis,Hibernate总结
7 0
推荐一款 Postman 的开源替代品: Postwoman
推荐一款 Postman 的开源替代品: Postwoman
8 0
❤️Androd 性能优化之布局优化❤️
Android的布局管理器本身就是个UI组件,所有的布局管理器都是ViewGroup的子类,而ViewGroup是View的子类,所以布局管理器可以当成普通的UI组件使用,也可以作为容器类使用,可以调用多个重载addView()向布局管理器中添加组件,并且布局管理器可以互相嵌套,当然不推荐过多的嵌套 (如果要兼容低端机型,最好不要超过5层)。
7 0
+关注
烟海之蓝
程序设计之道,无远弗界,御晨风而返
49
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载