Vue优化:常见会导致内存泄漏问题及优化详解


Posted in Javascript onAugust 04, 2020

如果你在用 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" href="https://joshuajohnson.co.uk/Choices/assets/styles/css/choices.min.css?version=3.0.3" 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优化:常见会导致内存泄漏问题及优化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
vue中监听返回键问题
Aug 28 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 #Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 #Javascript
详解JS深拷贝与浅拷贝
Aug 04 #Javascript
vue addRoutes路由动态加载操作
Aug 04 #Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 #Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 #Javascript
You might like
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python调用c++传递数组的实例
2019/02/13 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python如何读写CSV文件
2020/08/13 Python
python温度转换华氏温度实现代码
2020/12/06 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
迎接领导欢迎词
2014/01/11 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
2014年班主任工作总结
2014/11/08 职场文书
齐云山导游词
2015/02/06 职场文书
财务人员个人工作总结
2015/02/27 职场文书
导游词之日月潭
2019/11/05 职场文书
python基础之爬虫入门
2021/05/10 Python
logback 实现给变量指定默认值
2021/08/30 Java/Android