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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
1 Tube Radio
2021/03/02 无线电
第二节--PHP5 的对象模型
2006/11/16 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python实现俄罗斯方块
2018/06/26 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Python 实现微信自动回复的方法
2020/09/11 Python
教师找工作推荐信
2013/11/23 职场文书
无私奉献演讲稿
2014/09/04 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年食堂工作总结
2014/11/20 职场文书
关于感谢信的范文
2015/01/23 职场文书
实习协议书
2015/01/27 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
九年级语文教学反思
2016/03/03 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题