Vue项目在每条路线之后都会慢下来。

Question

问题：

每当我在列表页(主页)和细节页面之间导航时，我的站点就开始急剧减速。用这个我的意思是，在像3次往返之后，我开始注意到它有打嗝，在5-6次之后，我的整个pc开始冻结。

我的项目：

这是一个Vue项目，目前只有两条路线。主页是项目列表和列表中每个项目的详细页面。细节页面(特别是tree component)可能是问题所在，因为当我删除它时，问题就消失了。我把一些代码放在这篇文章的底部，并给出了项目的基本结构。

我要找的东西：

因为我没有任何错误，所以我不知道问题出在哪里。在项目的设置方式、加载/显示方式方面，我可能会做得更好。所以我想找出问题出在哪里。

我尝试了什么：

1. 还活着

在寻找解决方案时，我遇到了<stay-alive>标记。我试着把这个放在我的<router-view>上。这确实消除了减速，但我也失去了我所有的动态内容。现在，当我在不同的详细信息页之间导航时，所有页面上的数据都是相同的。

1. 数据获取(https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation)

我在想，如果我在某人进入一条路径之前加载所有数据，或者在我显示页面之前进行某种加载，也许会有帮助。这没什么用。

有可能其中之一是正确的方向，而我只是没有正确地实现它。)对我的编码还没有百分之百的信心:)

views/home.vue

只是一个简单的页面，其中包含链接到详细信息页的项目列表。

<template>
  // list with items that link to their corresponding detail page
</template>

import { mapState } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapState([
      'builds'
    ])
  }
}

views/details.vue现在，这个页面有点复杂。这个页面上最重要的是用Pixi Js生成的画布，当用户滚动页面时，这个画布会发生变化。画布元素是它自己的组件，所以我用一个道具传递一些数据。

<template>
  <div class='page-wrapper'>
    <div class="content-container">
      <section class="level milestone" v-for="level in build.guide" :key="level.id" :id="level.level">
        // Some stuff to display
      </section>
      <div class="sidebar">
        <tree :myprop="current"></tree>
      </div>
    </div>
  </div>
</template>

import { mapState } from 'vuex'
import Tree from '@/components/tree'

export default {
  name: 'Build',
  watch: {
    currentActive: {
      // To know where to user currently is
      // Pass this data to my tree component
    }
  },
  computed: {
    ...mapState([
      'builds'
    ])
  }
}

components/tree.vue

这就是用JSON文件中的数据绘制画布的地方。

<template>
  <div id="tree">
  </div>
</template>

import axios from 'axios'
import * as PIXI from 'pixi.js'
import { Viewport } from 'pixi-viewport'

export default {
  name: 'Tree',
  props: ['myprop'],
  data () {
    return {
      app: new PIXI.Application({ transparent: true, antialias: true }),
      treeData: {},
      // Some more
    }
  },
  watch: {
    myprop: function (newVal) {
      // Some stuff with my prop
    }
  },
  created () {
    axios.get('/data/data.json', {
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => {
        this.treeData = response.data
        this.loadTree()
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    loadTree () {
      // Load images and draw the canvas
      PIXI.loader
        .add('Image', require('@/assets/image.png'))
        .load(this.drawTree)
    },
    drawTree () {
      // Do all the drawing on the canvas
    }
  }
}

Answer 1

好吧，所以我现在已经解决了。我对这一切仍然很陌生，但我开始更多地研究开发工具的使用，以便找出这种问题的来源。我认为我仍然可以赢得很多这一点，但就目前而言，它有助于破坏我的PIXI应用从数据时，我完成了它。

  beforeDestroy () {
    this.app.destroy()
  }

如果有人发现这条有类似问题的线程，也许会有一些有用的链接：

使用dev工具查找内存泄漏的：

https://www.youtube.com/watch?v=Hr2vrhrNaRo

https://www.youtube.com/watch?v=RJRbZdtKmxU

避免vue:中的内存泄漏

https://v2.vuejs.org/v2/cookbook/avoiding-memory-leaks.html