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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
树结构之JavaScript
Jan 24 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
微信小程序block的使用教程
Apr 01 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 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
长波有什么东西
2021/03/01 无线电
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
教师个人剖析材料
2014/02/05 职场文书
市场营销求职信范文
2014/02/21 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
孟佩杰观后感
2015/06/17 职场文书