我正在用Vue.js建立一个网站，并使用PixiJS用来自大json文件的数据动态绘制画布。画布将作为组件生成并在视图中使用。

现在，当我第一次使用画布导航到视图时，一切看起来都很好。但是，当我开始在视图之间导航时，所有图纸都被弄乱了，所有的精灵都在那儿，但看起来却错综复杂且杂乱无章。然后，当我刷新页面时，画布再次看起来很好。这是一张图片：

我不确定这是什么问题，但我感觉这是多种因素的结合。也许我正在使用的100k行json文件与它有关（当我与之交互时视图也感觉很慢）

这是我的Vue组件的样子：

export default {
  name: 'Tree',
  data () {
    return {
      tree: {},
      app: new PIXI.Application()
    }
  },
  beforeMount () {
    this.tree = this.treeStateData
    PIXI.utils.clearTextureCache()
    PIXI.loader.reset()
  },
  mounted () {
    this.loadTree()
  },
  computed: {
    ...mapState([
      'treeStateData'
    ])
  },
  methods: {
    loadTree () {
      document.getElementById('tree').appendChild(this.app.view)

      // Load images
      PIXI.loader
        .add('background', require('@/assets/Background1.png'))
        .add('1', require('@/assets/PSGroupBackground1.png'))
      // lots more
        .load(this.drawTree)
    },
    drawTree () {
      const treeData = this.tree

      // Create viewport
      const viewport = new Viewport()
      this.app.stage.addChild(viewport)

      // Here i create some containers

      // Here i work with the data from the json and put stuff in the containers
    }
  }
}

我的Vue项目的结构是这样的：
查看

views/home.vue    
// Just a view with a link to details.vue

views/details.vue    
// A view that had <tree> component in it
<template>
  <div>
    <tree></tree>
  </div>
</template>

<script>
import Tree from '@/components/tree'

export default {
  name: 'Details',
  data () {},
  components: {
    Tree
  }
}
</script>

组件

components/tree.vue
// Here is where the tree canvas is generated

有人对如何取得进展有想法吗？我应该重新考虑我该怎么做吗？