电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue優化:常見會導致內存泄漏問題及優化詳解

瀏覽:111日期:2022-12-17 14:39:38

如果你在用 Vue 開發應用,那么就要當心內存泄漏的問題。這個問題在單頁應用 (SPA) 中尤為重要,因為在 SPA 的設計中,用戶使用它時是不需要刷新瀏覽器的,所以 JavaScript 應用需要自行清理組件來確保垃圾回收以預期的方式生效。因此在vue開發過程中,你需要時刻警惕內存泄漏的問題,這些內存泄漏往往會發生在使用 Vue 之外的其它進行 DOM 操作的三方庫時,請確保測試應用的內存泄漏問題并在適當的時機做必要的組件清理。

下面是我開發過程中遇到,并查資料總結的內存泄漏問題,會持續更新中

一、vue自定義指令給元素綁定事件,卻沒有解綁事件

這個問題見上篇博客,vue自定義指令導致的內存泄漏問題解決

二、v-if指令產生的內存泄露

v-if也是一個容易產生內存泄漏的地方。因為:

1、v-if綁定到false的值,但是實際上dom元素在隱藏的時候沒有被真實的釋放掉

2、就是非常常見的比如我們通過v-if刪除了父級元素,但是并沒有移除父級元素里的dom片段。通常產生于使用第三方庫的時候,比如下面的示例中,我們加載了一個帶有非常多選項的選擇框,然后我們用到了一個顯示/隱藏按鈕,通過一個 v-if 指令從虛擬 DOM 中添加或移除它。這個示例的問題在于這個 v-if 指令會從 DOM 中移除父級元素,但是我們并沒有清除由 Choices.js 新添加的 DOM 片段,從而導致了內存泄漏。

<link rel='stylesheet prefetch' rel='external nofollow' ><script src='https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js?version=3.0.3'></script><div id='app'> <button v-if='showChoices' @click='hide'>Hide</button> <button v-if='!showChoices' @click='show' >Show</button> <div v-if='showChoices'> <select id='choices-single-default'></select> </div></div>

new Vue({ el: '#app', data: function () { return { showChoices: true } }, mounted: function () { this.initializeChoices() }, methods: { initializeChoices: function () { let list = [] // 我們來為選擇框載入很多選項 // 這樣的話它會占用大量的內存 for (let i = 0; i < 1000; i++) { list.push({ label: 'Item ' + i, value: i }) } new Choices('#choices-single-default', { searchEnabled: true, removeItemButton: true, choices: list }) }, show: function () { this.showChoices = true this.$nextTick(() => { this.initializeChoices() }) }, hide: function () { this.showChoices = false } }})

解決實例:在上述的示例中,我們可以用 hide() 方法在將選擇框從 DOM 中移除之前做一些清理工作,來解決內存泄露問題。為了做到這一點,我們會在 Vue 實例的數據對象中保留一個屬性,并會使用 Choices API 中的 destroy() 方法將其清除。

new Vue({ el: '#app', data: function () { return { showChoices: true, choicesSelect: null } }, mounted: function () { this.initializeChoices() }, methods: { initializeChoices: function () { let list = [] for (let i = 0; i < 1000; i++) { list.push({ label: 'Item ' + i, value: i }) } // 在我們的 Vue 實例的數據對象中設置一個 `choicesSelect` 的引用 this.choicesSelect = new Choices('#choices-single-default', { searchEnabled: true, removeItemButton: true, choices: list }) }, show: function () { this.showChoices = true this.$nextTick(() => { this.initializeChoices() }) }, hide: function () { // 現在我們可以讓 Choices 使用這個引用 // 在從 DOM 中移除這些元素之前進行清理工作 this.choicesSelect.destroy() this.showChoices = false } }})

三、vue-router跳轉到別的組件導致的內容泄漏

在上述示例中,我們使用了一個 v-if 指令產生內存泄漏,但是一個更常見的實際的場景是使用 Vue Router 在一個單頁應用中路由到不同的組件。

就像這個 v-if 指令一樣,當一個用戶在你的應用中導航時,Vue Router 從虛擬 DOM 中移除了元素,并替換為了新的元素。但是其子元素dom片段也并沒有銷毀。

Vue 的 beforeDestroy() 生命周期鉤子是一個解決基于 Vue Router 的應用中的這類問題的好方法。我們可以將清理工作放入 beforeDestroy() 鉤子,像這樣:

beforeDestroy: function () { this.choicesSelect.destroy()}

所以最正確的解決方案就是:首先,v-if置為false前先刪除創建的dom片段;其次,路由跳出吃,在beforeDestroy鉤子函數里面判斷choicesSelect是否銷毀,沒銷毀則銷毀。

還有一個替代方案:

我們已經討論了移除元素時的內存管理,但是如果你打算在內存中保留狀態和元素該怎么做呢?這種情況下,你可以使用內建的 keep-alive 組件。

當你用 keep-alive 包裹一個組件后,它的狀態就會保留,因此就留在了內存里。

<button @click='show = false'>Hide</button><keep-alive> // <my-component> 即便被刪除仍會刻意保留在內存里 <my-component v-if='show'></my-component></keep-alive>

這個技巧可以用來提升用戶體驗。例如,設想一個用戶在一個文本框中輸入了評論,之后決定導航離開。如果這個用戶之后導航回來,那些評論應該還保留著。

一旦你使用了 keep-alive,那么你就可以訪問另外兩個生命周期鉤子:activated和 deactivated。如果你想要在一個 keep-alive 組件被移除的時候進行清理或改變數據,可以使用 deactivated 鉤子。

deactivated: function () { // 移除任何你不想保留的數據,或者銷毀可能產生內存泄漏的地方}

以上這篇Vue優化:常見會導致內存泄漏問題及優化詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 动环监控_机房环境监控_DCIM_机房漏水检测-斯特纽 | 精密冲床,高速冲床等冲压设备生产商-常州晋志德压力机厂 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | 逗网红-抖音网红-快手网红-各大平台网红物品导航 | 螺旋叶片_螺旋叶片成型机_绞龙叶片_莱州源泽机械制造有限公司 | 黄石妇科医院_黄石东方女子医院_黄石东方妇产医院怎么样 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 | 沥青灌缝机_路面灌缝机_道路灌缝机_沥青灌缝机厂家_济宁萨奥机械有限公司 | 杭州用友|用友软件|用友财务软件|用友ERP系统--杭州协友软件官网 | 深圳律师咨询_深圳律师事务所_华荣【免费在线法律咨询】网 | 暴风影音 | 信阳网站建设专家-信阳时代网联-【信阳网站建设百度推广优质服务提供商】信阳网站建设|信阳网络公司|信阳网络营销推广 | ICP备案查询_APP备案查询_小程序备案查询 - 备案巴巴 | 浙江富广阀门有限公司| 硅胶管挤出机厂家_硅胶挤出机生产线_硅胶条挤出机_臣泽智能装备 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 撕碎机_轮胎破碎机_粉碎机_回收生产线厂家_东莞华达机械有限公司 | 通用磨耗试验机-QUV耐候试验机|久宏实业百科 | 杭州代理记账费用-公司注销需要多久-公司变更监事_杭州福道财务管理咨询有限公司 | 检验科改造施工_DSA手术室净化_导管室装修_成都特殊科室建设厂家_医疗净化工程公司_四川华锐 | 房车价格_依维柯/大通/东风御风/福特全顺/江铃图片_云梯搬家车厂家-程力专用汽车股份有限公司 | 深圳宣传片制作_产品视频制作_深圳3D动画制作公司_深圳短视频拍摄-深圳市西典映画传媒有限公司 | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | 金属抛光机-磁悬浮抛光机-磁力研磨机-磁力清洗机 - 苏州冠古科技 | 特种电缆厂家-硅橡胶耐高温电缆-耐低温补偿导线-安徽万邦特种电缆有限公司 | 铣刨料沥青破碎机-沥青再生料设备-RAP热再生混合料破碎筛分设备 -江苏锡宝重工 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 知网论文检测系统入口_论文查重免费查重_中国知网论文查询_学术不端检测系统 | 淘气堡_室内儿童乐园_户外无动力儿童游乐设备-高乐迪(北京) | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 期货软件-专业期货分析软件下载-云智赢 | 劳动法网-专业的劳动法和劳动争议仲裁服务网 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | 置顶式搅拌器-优莱博化学防爆冰箱-磁驱搅拌器-天津市布鲁克科技有限公司 | 无痕胶_可移胶_无痕双面胶带_可移无痕胶厂家-东莞凯峰 | 深圳APP开发公司_软件APP定制开发/外包制作-红匣子科技 | 地图标注-手机导航电子地图如何标注-房地产商场地图标记【DiTuBiaoZhu.net】 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 |