zoukankan      html  css  js  c++  java
  • 在Vue中使用Object.freeze

    在vue2.0中,当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter,这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化

    有时在实际应用中,我们只是用来存储某个对象或者数组,并不要求它响应对应的视图,但在这个过程中vue还是会用object.defineProperty来监听这个数组,这样就是一种性能浪费,所以我们阔以使用Object.freeze来冻结数据

    {{ item.text }}

    data() { let data = Object.freeze([{text:'xxx'},{text:'ipbic'}]) return { msg: '', items:data } }, mounted() {
    this.items[0].text = '分享快乐'; // 界面不会更新
    
    this.items = [{ text: 'itnavs' },{ text: '分享快乐' }]; // 界面会更新
    
    this.items = Object.freeze([{ text: 'itnavs' },{ text: '分享快乐' }]); // 界面会更新
    

    },
    如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增

    使用Object.freeze从而避免这种资源的浪费

  • 相关阅读:
    Excel如何根据基类标红重复内容
    使用FRP配置Windows远程控制
    CentOS 7安装gevent
    CentOS7安装pip
    把音频文件压缩变小的方法
    Linux中nohup和&的用法和区别
    Windows下安装redis服务
    TFS解锁命令
    linux下用rpm 安装jdk
    avascript的匿名函数
  • 原文地址:https://www.cnblogs.com/7c89/p/14938721.html
Copyright © 2011-2022 走看看