Javascript 在vue应用程序中首次加载后，动态PixiJS画布出错

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

现在，当我第一次使用画布导航到视图时，一切看起来都很好。但是，当我开始在视图之间导航时，绘图全是乱七八糟的，精灵都在那里，但它看起来完全不合适，凌乱不堪。当我刷新页面时，画布看起来又很好了。这是一张图片：

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

这就是我的Vue组件的外观：

导出默认值{
名称：'树'，
数据（）{
返回{
树：{}，
app:new PIXI.Application（）
}
},
安装前（）{
this.tree=this.treeStateData
PIXI.utils.clearTextureCache（）
PIXI.loader.reset（）
},
挂载（）{
这是loadTree（）
},
计算：{
…地图状态([
“treeStateData”
])
},
方法：{
loadTree（）{
document.getElementById（'tree'）.appendChild（this.app.view）
//加载图像
皮希装载机
.add（'background'，require（'@/assets/Background1.png'））
.add（'1'，require（'@/assets/PSGroupBackground1.png'））
//更多
.load（此.drawTree）
},
drawTree（）{
const treeData=this.tree
//创建视口
常量视口=新视口（）
this.app.stage.addChild（视口）
//这里我创建了一些容器
//在这里，我处理来自json的数据，并将内容放入容器中
}
}
}

我的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

---

有人知道如何在这方面取得进展吗？我是否应该重新考虑如何执行此操作？

因为在第一次加载时一切都正常，缓存组件可能有助于在路由之间导航。它还可以节省每次重新计算PixiJS显示的时间

将

路由器视图

包装在组件中：

加载json时，立即在json上尝试

Object.freeze（）

（即

const json=Object.freeze（response.data）

。如果这样做没有帮助，试着让它没有反应性，也就是说没有Vuex，

数据，
道具，
，将导入的所有东西都存储在一个模块中。嗨，丹，两者都不会改变正在发生的事情。最好不要存储它，只需从“@/data/data.json”导入json，然后使用它。是的，这是我的第二个建议是的，我也试过了，但没有改变现状。但还是可能更好。无论如何，谢谢你的建议，如果你有更多的想法，请告诉我：）当你在视图之间导航时，这会保持可见吗？或者是在一个单独的路由/不存在的组件上重新渲染？这将有助于看到模板的插入位置！这个现在有用耶！性能仍然不是最好的（在视口中导航/拖动时），但我想这是另一件事：）如果您有任何想法/提示，我可以研究以提高性能，这将非常好，我很高兴：）一个建议是测试在非Vue应用程序中使用相同的PixiJS显示是否存在性能问题。这可能有助于区分浏览器是否呈现了如此多的信息，或者是否在某种程度上与Vue相关。谢谢Dan。玩了一会儿，发现了问题。显然，它不喜欢为每个连接线创建一个新的PIXI.Graphics（），只需创建一条连接线并在该连接线上绘制所有线即可。进入下一个挑战！