使用P5Js和VueJs进行数据初始化和观察者

Question

当我试图使用进化算法和构建过程的可视化工具时，我想使用VueJs和P5Js。 我有这样的代码：(SO) Playing with Evolutionary Algorithms on Codepen.io

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

这里我试图做：

• 传递全局OBJET Game为Vue的实例的数据。然后​​得到正确更新，但数据是如此之大，一切都变得迟缓;
• 在声明时填充Game.population数组，但它不起作用：P5JS抛出错误createVector() is not defined;
• 在Vue实例的beforeCreate()方法中填充Game.population数组。它也不工作。给我一个其他的错误;
• 代理Game.population通过全球或Vue的实例的beforeCreate()方法中声明，对策划有趣单元的数据（我不需要pos属性），因此避免createVector()错误的其他对象Data。这是一个死路一条;
• 关于提升的思考，我想知道VueJS是否在P5JS运行之前初始化。情况就是这样。但我无法想象如何改变这一点。

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

Answer 1

这个解决方案并不像将你的Game对象扔进Vue实例那样漂亮，但它起作用。

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

这是我改变了：

1. 增加了一个computed getter/setter为​​，给你一个干净的方式来渲染阵列的模板长度和分配的能力它在你的游戏循环中使用app.population = Game.population在你的Game.doPopulatePacks例程中。
2. 将Vue实例中的data.property更改为_property，以使命名约定保持配对以便在计算属性中使用。它确实带来了no longer proxied to avoid conflicts with Vue's internal properties的警告，因为我们依赖于模板中的计算属性。 （目前，还没有一种在Vue公司的实例定义私人性质明确的约定，即使下划线_是JS偏好更广泛。）

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