使用 P5Js 和 VueJs 的数据初始化和观察程序

Question

当我尝试使用进化算法并构建该过程的可视化工具时，我想将 VueJs 与 P5Js 一起使用。 我有这个代码：(SO)在 Codepen.io 上玩进化算法

问题是 Vue 实例的数据population没有正确更新。

这是我试图做的：

• 将全局对象Game作为 Vue 实例的数据传递。然后population正确更新，但数据太大，一切都会滞后;
• 声明时填充Game.population数组，但它不起作用：P5JScreateVector() is not defined给我抛出错误;
在
• Vue 实例的beforeCreate()方法中填充Game.population数组。它也没有工作。给我另一个错误;
• 其他对象的代理Game.populationData全局声明或在 Vue 实例的beforeCreate()方法中声明，用于整理有趣的单元格数据(我不需要pos属性)，从而避免createVector()错误。这是一个死胡同;
• 考虑到吊装，我想知道 VueJS 是否在 P5JS 运行之前被初始化。事实就是如此。但我不知道如何改变这一点。

这里有什么问题？我应该如何重构我的脚本，以便 Vue 实例的数据和 Game.population 可以链接？

Answer 1

这个解决方案并不像将Game对象扔到 Vue 实例中那么漂亮，但它有效。

在这里分叉：https://codepen.io/andymerskin/pen/LyoEmW

这是我更改的内容：

1. 为population添加了计算的 getter/setter，为您提供了一种在模板中渲染数组长度的干净方法，并且能够在Game.doPopulatePacks例程中使用app.population = Game.population在游戏循环中分配数组。
2. 将 Vue 实例中的data.property更改为_property，以保持命名约定配对，以便在计算属性中使用。它确实带有警告，它不再代理以避免与 Vue 的内部属性发生冲突，因为我们依赖于模板中的计算属性。 (目前，在 Vue 实例中定义私有属性没有明确的约定，尽管下划线_是 JS 中更广泛的偏好。

有了这个，您将在分叉演示中看到您的游戏人口在 UI 中保持最新状态。