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 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery拖动图片删除示例
May 10 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
vue中监听路由参数的变化及方法
Dec 06 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使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP微商城开源代码实例
2019/03/27 PHP
javascript 面向对象继承
2009/11/26 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
javascript实现评分功能
2020/06/24 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python对execl 处理操作代码
2020/06/22 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
查摆问题自我剖析材料
2014/08/18 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
2014年销售工作总结
2014/12/01 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers