使用P5J和VueJs的数据初始化和观察者

Question

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

问题是Vue实例的数据population无法正确更新。

这是我试图做的事情：

• 将全局对象Game作为Vue实例的数据传递。然后population正确更新，但数据太大，一切都变得迟钝;
• 声明时填充Game.population数组，但它不起作用：P5JS给我一个错误createVector() is not defined;
• 在Vue实例的Game.population方法中填充beforeCreate()数组。它既不起作用也不起作用。给我另一个错误;
• 代理Game.population由全局或Vue实例Data方法声明的其他对象beforeCreate()，用于策划有趣的单元格数据（我不需要{ {1}}属性）因此避免pos错误。这是一个死胡同;
• 考虑到吊装，我想知道在P5JS运行之前VueJS是否已初始化。情况就是这样。但我无法想象如何改变它。

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

Answer 1

此解决方案与将Game对象放入Vue实例一样美妙，但它可以正常工作。

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

这是我改变的内容：

1. 为population添加了computed getter/setter，为您提供了一种在模板中呈现数组长度的简洁方法，以及使用{{1}在游戏循环中分配数据的能力在你的app.population = Game.population例程中。
2. 将Vue实例中的Game.doPopulatePacks更改为data.property，以保持命名约定配对，以便在计算属性中使用。它确实附带了它no longer proxied to avoid conflicts with Vue's internal properties的警告，因为我们依赖于模板中的计算属性。 （目前，在Vue实例中定义私有属性没有明确的约定，即使下划线_property更广泛地是JS中的首选项。）

通过这种方式，您可以在分叉演示中看到您的游戏人口在用户界面中保持最新状态。