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

您的位置:首頁技術(shù)文章
文章詳情頁

Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解

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

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

下面是我開發(fā)過程中遇到,并查資料總結(jié)的內(nèi)存泄漏問題,會(huì)持續(xù)更新中

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

這個(gè)問題見上篇博客,vue自定義指令導(dǎo)致的內(nèi)存泄漏問題解決

二、v-if指令產(chǎn)生的內(nèi)存泄露

v-if也是一個(gè)容易產(chǎn)生內(nèi)存泄漏的地方。因?yàn)椋?/p>

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

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

<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 = [] // 我們來為選擇框載入很多選項(xiàng) // 這樣的話它會(huì)占用大量的內(nèi)存 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 } }})

解決實(shí)例:在上述的示例中,我們可以用 hide() 方法在將選擇框從 DOM 中移除之前做一些清理工作,來解決內(nèi)存泄露問題。為了做到這一點(diǎn),我們會(huì)在 Vue 實(shí)例的數(shù)據(jù)對(duì)象中保留一個(gè)屬性,并會(huì)使用 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 實(shí)例的數(shù)據(jù)對(duì)象中設(shè)置一個(gè) `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 () { // 現(xiàn)在我們可以讓 Choices 使用這個(gè)引用 // 在從 DOM 中移除這些元素之前進(jìn)行清理工作 this.choicesSelect.destroy() this.showChoices = false } }})

三、vue-router跳轉(zhuǎn)到別的組件導(dǎo)致的內(nèi)容泄漏

在上述示例中,我們使用了一個(gè) v-if 指令產(chǎn)生內(nèi)存泄漏,但是一個(gè)更常見的實(shí)際的場(chǎng)景是使用 Vue Router 在一個(gè)單頁應(yīng)用中路由到不同的組件。

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

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

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

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

還有一個(gè)替代方案:

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

當(dāng)你用 keep-alive 包裹一個(gè)組件后,它的狀態(tài)就會(huì)保留,因此就留在了內(nèi)存里。

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

這個(gè)技巧可以用來提升用戶體驗(yàn)。例如,設(shè)想一個(gè)用戶在一個(gè)文本框中輸入了評(píng)論,之后決定導(dǎo)航離開。如果這個(gè)用戶之后導(dǎo)航回來,那些評(píng)論應(yīng)該還保留著。

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

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

以上這篇Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 成都珞石机械 - 模温机、油温机、油加热器生产厂家 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 金属检测机_金属分离器_检针验针机_食品药品金属检探测仪器-广东善安科技 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 医学动画公司-制作3d医学动画视频-医疗医学演示动画制作-医学三维动画制作公司 | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 钢丝绳探伤仪-钢丝绳检测仪-钢丝绳探伤设备-洛阳泰斯特探伤技术有限公司 | 彼得逊采泥器-定深式采泥器-电动土壤采样器-土壤样品风干机-常州索奥仪器制造有限公司 | 交流伺服电机|直流伺服|伺服驱动器|伺服电机-深圳市华科星电气有限公司 | 棕刚玉-白刚玉厂家价格_巩义市东翔净水材料厂 | 铝镁锰板厂家_进口钛锌板_铝镁锰波浪板_铝镁锰墙面板_铝镁锰屋面-杭州军晟金属建筑材料 | 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | SDI车窗夹力测试仪-KEMKRAFT方向盘测试仪-上海爱泽工业设备有限公司 | 税筹星_灵活用工平台_企业财务顾问_财税法薪综合服务平台 | 深圳市源和塑胶电子有限公司-首页 | 耐热钢-耐磨钢-山东聚金合金钢铸造有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 庭院灯_太阳能景观灯_草坪灯厂家_仿古壁灯-重庆恒投科技 | 办公室装修_上海办公室设计装修_时尚办公新主张-后街印象 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 磁力抛光研磨机_超声波清洗机厂家_去毛刺设备-中锐达数控 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 六维力传感器_三维力传感器_二维力传感器-南京神源生智能科技有限公司 | 上海赞永| 陕西视频监控,智能安防监控,安防系统-西安鑫安5A安防工程公司 | 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | 周口市风机厂,周鼓风机,河南省周口市风机厂 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 月嫂_保姆_育婴_催乳_母婴护理_产后康复_养老护理-吉祥到家家政 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 阿米巴企业经营-阿米巴咨询管理-阿米巴企业培训-广东键锋企业管理咨询有限公司 | 济南办公室装修-厂房装修-商铺装修-工装公司-山东鲁工装饰设计 | 齿轮减速电机一体机_蜗轮蜗杆减速马达-德国BOSERL齿轮减速机带电机生产厂家 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 标准品网_标准品信息网_【中检计量】| 国资灵活用工平台_全国灵活用工平台前十名-灵活用工结算小帮手 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 桨叶搅拌机_螺旋挤压/方盒旋切造粒机厂家-无锡市鸿诚输送机械有限公司 |