javascript - Vue 项目在每条路线后都变慢了

问题描述

问题：
每次我在列表页面（主页）和详细信息页面之间导航时，我的网站都会开始急剧变慢。我的意思是，在来回 3 次之后，我开始注意到它有打嗝，在 5-6 次之后，我的整个电脑开始冻结。

我的项目：
这是一个 Vue 项目，目前只有 2 条路线。主页是项目列表和列表中每个项目的详细信息页面。详细信息页面（特别是tree component）可能是问题所在，因为当我删除它时，问题就消失了。我在这篇文章的底部放了一些代码以及项目的基本结构。

我在找什么：
由于我没有收到任何错误，我不确定问题出在哪里。在我的项目设置方式、加载/显示内容的方式上，我可能可以做得更好。所以我正在寻找方法来找出问题所在。

我尝试了什么：

保持活力
在寻找解决方案时，我遇到了这个<stay-alive>标签。我试着把它放在我的<router-view>. 这确实摆脱了减速，但我也失去了所有的动态内容。现在，当我在不同的详细信息页面之间导航时，所有页面上的数据都相同。
数据获取（https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation）
我在想，如果我在有人进入路线或做一些事情之前加载所有数据可能会有所帮助在我显示页面之前进行加载。这没有帮助。

其中一件事情可能是正确的方向，而我只是没有正确实施。对我的编码还没有 100% 的信心 :)

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 生成的画布，当用户滚动页面时，这个画布会发生变化。Canvas 元素是它自己的组件，因此我使用道具传递了一些数据。

<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
    }
  }
}

标签： javascriptvue.js

好的，所以我现在已经解决了。我对这一切还是很陌生，但我开始更多地研究使用开发工具，以便找出此类问题的来源。我想我仍然可以用这个赢得很多，但现在它有助于在我完成它时从数据中破坏我的 PIXI 应用程序。

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

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

使用开发工具查找内存泄漏：
https ://www.youtube.com/watch?v=Hr2vrhrNaRo
https://www.youtube.com/watch?v=RJRbZdtKmxU

避免 vue 中的内存泄漏：
https ://vuejs.org/v2/cookbook/avoiding-memory-leaks.html

javascript - Vue 项目在每条路线后都变慢了

问题描述

解决方案

推荐阅读