草庐IT

vue防止内存泄漏的几点写法

姜治宇 2023-03-28 原文

1、beforeDestroy

beforeDestroy周期一般是在组件销毁时调用，比如使用v-if进行组件的显示隐藏，或者页面跳转时就会调用到这个周期。
堆内存使用后一定要注意释放，否则gc总不回收就会导致内存泄漏。
比如对dom的引用、事件Listener、总线eventBus等，一定要在beforeDestroy里释放解绑。

    export default {
        name:'test',
        data(){
            return {
                width: window.innerWidth,
                height: window.innerHeight 
            }
        },
        mounted() {
            this.resizeFunc = () => {
                this.width = window.innerWidth;
                this.height = window.innerHeight;
            };
            window.addEventListener('resize', this.resizeFunc);
        },
        beforeDestroy(){
            window.removeEventListener('resize',this.resizeFunc);
            this.resizeFunc = null;
        }
    }

2、利用weakmap和weakset

当vue中有Dom引用时，需要注意内存释放问题。weakset 和 weakmap对值的引用都是不计入垃圾回收机制的。也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存。

    export default {
        name: 'test',
        data() {
            return {
                wp: new WeakMap()
            }
        },
        mounted() {

            let ele = document.getElementById('con');
            let handleFunc = () => {
                console.log(ele.innerHTML);//闭包，对ele有引用，不容易释放
            }
            
            this.wp.set(ele, handleFunc);//建立节点和事件的关系
            ele.addEventListener('click', this.wp.get(ele), false);

        },
        beforeDestroy() {
            this.ele.removeEventListener('click',this.wp.get(this.ele));//清理挂载事件
            
        }
    }

3、路由守卫beforeRouteLeave

如果是对router进行了keep-alive，那进行页面跳转时就不会触发beforeDestroy，也就是对组件进行了缓存，不会销毁组件，这时我们可以用路由守卫来确保释放资源。

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
     this.$destroy();//手动调用beforeDestroy释放资源，或者单独定义哪些资源需要释放
     next();    //允许跳转页面
  },

4、移除watch

如果是手动调用监听watch的，也需要释放一下资源。

export default {
  data() {
    return {
      test: 'jack'
    }
  },
  watch: {
    test(newVal, oldVal) {
          console.log(newVal);
      
    }
  },
  methods:{

      startWatch(){
          this.unwatch = this.$watch('test',(newval,oldval)=>{
              //this.$watch会返回一个取消监听的函数句柄
              console.log('watch>>>',newval);
          });
      }
  },
  beforeDestroy() {
    // 移除监听
    this.unwatch && this.unwatch();//执行销毁监听
  }
}
写法vuethisbeforeDestroycode

有关vue防止内存泄漏的几点写法的更多相关文章

  1. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代

  2. ruby-on-rails - Ruby 中的内存模型 - 2

    ruby如何管理内存。例如:如果我们在执行过程中采用C程序，则以下是内存模型。类似于这个ruby如何处理内存。C:__________________|||stack|||------------------||||------------------|||||Heap|||||__________________|||data|__________________|text|__________________Ruby:? 最佳答案 Ruby中没有“内存”这样的东西。Class#allocate分配一个对象并返回该对象。这就是程序

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. 键删除后 ruby​​ 哈希内存泄漏 - 2

    你好，我无法成功如何在散列中删除key后释放内存。当我从哈希中删除键时，内存不会释放，也不会在手动调用GC.start后释放。当从Hash中删除键并且这些对象在某处泄漏时，这是预期的行为还是GC不释放内存？如何在Ruby中删除Hash中的键并在内存中取消分配它？例子:irb(main):001:0>`ps-orss=-p#{Process.pid}`.to_i=>4748irb(main):002:0>a={}=>{}irb(main):003:0>1000000.times{|i|a[i]="test#{i}"}=>1000000irb(main):004:0>`ps-orss=-p

  5. ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2

    我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中

  6. ruby-on-rails - HTTParty 的内存问题和下载大文件 - 2

    这会导致Ruby出现内存问题吗？我知道如果大小超过10KB，Open-URI会写入TempFile。但是HTTParty会在写入TempFile之前尝试将整个PDF保存到内存吗？src=Tempfile.new("file.pdf")src.binmodesrc.writeHTTParty.get("large_file.pdf").parsed_response 最佳答案 您可以使用Net::HTTP。参见thedocumentation(特别是标题为“流媒体响应机构”的部分)。这是文档中的示例:uri=URI('http://e

  7. ruby - 防止SQL注入(inject)/好的Ruby方法 - 2

    Ruby中防止SQL注入(inject)的好方法是什么？ 最佳答案 直接使用ruby？使用准备好的语句:require'mysql'db=Mysql.new('localhost','user','password','database')statement=db.prepare"SELECT*FROMtableWHEREfield=?"statement.execute'value'statement.fetchstatement.close 关于ruby-防止SQL注入(inject

  8. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  9. ruby-on-rails - 内存中具有相同 ID 的更多对象？ - 2

    在部署在heroku上的Rails应用程序(v:3.1)中，我在内存中获得了更多具有相同ID的对象。我的heroku控制台日志:>>Project.find_all_by_id(92).size=>2>>ActiveRecord::Base.connection.execute('select*fromprojectswhereid=92').to_a.size=>1这怎么可能？可能是什么问题？ 最佳答案 解决方案根据您的SQL查询，您的数据库中显然没有重复条目。也许您的类项目中的size或length方法已被覆盖。我试过find_

  10. ruby - rails 3.0.7 内存泄漏 - 2

    我的两个不同的Rails应用程序的内存有一些奇怪的问题。这两个应用程序都使用rails3.0.7。每个Controller请求分配20-30-50MB的内存。在生产模式下，这个数量减少到5-10。但这是同样的事情。这是两个应用程序使用的gem列表:gem'pg'gem'haml'gem'sass'gem'devise'gem'simple_form'gem'state_machine'gem"globalize3","0.1.0.beta"gem"easy_globalize3_accessors"gem'paperclip'gem'andand'关闭所有这些gem不会给我任何结果。我

随机推荐