如果你在用Vue开发应用,那么就要当心内存泄漏的问题。这个问题在单页应用(SPA)中尤为重要,因为在水疗的设计中,用户使用它时是不需要刷新浏览器的,所以JavaScript应用需要自行清理组件来确保垃圾回收以预期的方式生效,因此在Vue开发过程中,你需要时刻警惕内存泄漏的问题,这些内存泄漏往往会发生在使用Vue之外的其它进行DOM操作的三方库时,请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理。
下面是我开发过程中遇到,并查资料总结的内存泄漏问题,会持续更新中
<强>一、vue自定义指令给元素绑定事件,却没有解绑事件
这个问题见上篇博客,vue自定义指令导致的内存泄漏问题解决
<强>二、v指令产生的内存泄露
v也是一个容易产生内存泄漏的地方。因为:
1, v绑定到错误的值,但是实际上dom元素在隐藏的时候没有被真实的释放掉
2,就是非常常见的比如我们通过v删除了父级元素,但是并没有移除父级元素里的dom片段。通常产生于使用第三方库的时候,比如下面的示例中,我们加载了一个带有非常多选项的选择框,然后我们用到了一个显示/隐藏按钮,通过一个v指令从虚拟dom中添加或移除它。这个示例的问题在于这个v指令会从dom中移除父级元素,但是我们并没有清除由选择。js新添加的DOM片段,从而导致了内存泄漏。
& lt;链接rel="样式表预取" href=" https://joshuajohnson.co.uk/Choices/assets/styles/css/choices.min.css& # 63; version=3.0.3 " rel=巴獠縩ofollow”比;
& lt;脚本src=" https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js& # 63; version=3.0.3 "祝辞& lt;/script>
& lt; div id=坝τ谩北?
& lt;按钮v=皊howChoices @click”=耙亍痹贖ide
& lt;按钮v=" !showChoices“@click="秀”祝辞Show
& lt; div v=皊howChoices”比;
& lt;选择id=" choices-single-default "祝辞& lt;/select>
& lt;/div>
& lt;/div>
之前
新Vue ({
埃尔:“#应用”,
数据:函数(){
返回{
showChoices:真
｝
},
安装:函数(){
this.initializeChoices ()
},
方法:{
initializeChoices:函数(){
让列表=[]//我们来为选择框载入很多选项//这样的话它会占用大量的内存
(让我=0;我& lt;1000;我+ +){
list.push ({
标签:“项”+我,
价值:我
})
｝
新的选择(“# choices-single-default ", {
searchEnabled:没错,
removeItemButton:没错,
选择:列表
})
},
显示:函数(){
这一点。showChoices=true
美元。nextTick(()=比;{
this.initializeChoices ()
})
},
隐藏:函数(){
这一点。showChoices=false
｝
｝
})
在上述的示例中,我们可以用隐藏()方法在将选择框从DOM中移除之前做一些清理工作,来解决内存泄露问题。为了做到这一点,我们会在Vue实例的数据对象中保留一个属性,并会使用API中选择的破坏()方法将其清除。
新Vue ({
埃尔:“#应用”,
数据:函数(){
返回{
showChoices:没错,
choicesSelect:零
｝
},
安装:函数(){
this.initializeChoices ()
},
方法:{
initializeChoices:函数(){
让列表=[]
(让我=0;我& lt;1000;我+ +){
list.push ({
标签:“项”+我,
价值:我
})
｝//在我们的Vue实例的数据对象中设置一个‘choicesSelect’的引用
这一点。choicesSelect=新的选择(“# choices-single-default ", {
searchEnabled:没错,
removeItemButton:没错,
选择:列表
})
},
显示:函数(){
这一点。showChoices=true
美元。nextTick(()=比;{
this.initializeChoices ()
})
},
隐藏:函数(){//现在我们可以让选择使用这个引用//在从DOM中移除这些元素之前进行清理工作
this.choicesSelect.destroy ()
这一点。showChoices=false
｝
｝
})
<强>三,vue-router跳转到别的组件导致的内容泄漏
在上述示例中,我们使用了一个v指令产生内存泄漏,但是一个更常见的实际的场景是使用Vue路由器在一个单页应用中路由到不同的组件。
就像这个v指令一样,当一个用户在你的应用中导航时,Vue路由器从虚拟DOM中移除了元素,并替换为了新的元素。但是其子元素DOM片段也并没有销毁。
