使用 P5Js 和 VueJs 的数据初始化和观察者
Data initialization and watchers using P5Js and VueJs
当我尝试使用进化算法和构建过程的可视化工具时，我想将 VueJs 与 P5Js 一起使用。
我有这个代码：(SO) Playing with Evolutionary Algorithms on Codepen.io
问题是 Vue 实例的数据 population 没有正确更新。
这是我尝试做的：
- 将全局对象
Game 作为 Vue 实例的数据传递。然后 population 得到正确更新，但数据太大，一切都变得迟钝；
- 声明时填充
Game.population 数组，但它不起作用：P5JS 抛出错误 createVector() is not defined；
- 在 Vue 实例的
beforeCreate() 方法中填充 Game.population 数组。它也不起作用。给我另一个错误；
- 代理
Game.population 由全局声明的另一个对象 Data 或在 Vue 实例的 beforeCreate() 方法中声明，用于管理有趣的单元格数据（我不需要 pos属性），从而避免 createVector() 错误。这是一条死胡同；
- 想着吊装，想知道VueJS是不是先于P5JS初始化的运行。是这样的。但我不知道如何改变它。
这里有什么问题？我应该如何重构我的脚本以便 Vue 实例的数据和 Game.population 可以链接？
这个解决方案不如将 Game 对象放入 Vue 实例中那么漂亮，但它确实有效。
在这里分叉： https://codepen.io/andymerskin/pen/LyoEmW
这是我更改的内容：
- 为
population 添加了 computed getter/setter，为您提供了一种在模板中呈现数组长度的简洁方法，并能够使用 app.population = Game.population 在游戏循环中分配它你的 Game.doPopulatePacks 例程。
- 将 Vue 实例中的
data.property 更改为 _property 以保持命名约定配对以在计算的 属性 中使用。它确实带有警告，它是 no longer proxied to avoid conflicts with Vue's internal properties，因为我们依赖于模板中计算的 属性。
（目前，在 Vue 实例中定义私有属性还没有明确的约定，尽管下划线 _ 是 JS 中更广泛的偏好。）
这样，您将在分叉演示中看到您的游戏人口在 UI 中保持最新。
当我尝试使用进化算法和构建过程的可视化工具时，我想将 VueJs 与 P5Js 一起使用。 我有这个代码：(SO) Playing with Evolutionary Algorithms on Codepen.io
问题是 Vue 实例的数据 population 没有正确更新。
这是我尝试做的：
- 将全局对象
Game作为 Vue 实例的数据传递。然后population得到正确更新，但数据太大，一切都变得迟钝； - 声明时填充
Game.population数组，但它不起作用：P5JS 抛出错误createVector() is not defined； - 在 Vue 实例的
beforeCreate()方法中填充Game.population数组。它也不起作用。给我另一个错误； - 代理
Game.population由全局声明的另一个对象Data或在 Vue 实例的beforeCreate()方法中声明，用于管理有趣的单元格数据（我不需要pos属性），从而避免createVector()错误。这是一条死胡同； - 想着吊装，想知道VueJS是不是先于P5JS初始化的运行。是这样的。但我不知道如何改变它。
这里有什么问题？我应该如何重构我的脚本以便 Vue 实例的数据和 Game.population 可以链接？
这个解决方案不如将 Game 对象放入 Vue 实例中那么漂亮，但它确实有效。
在这里分叉： https://codepen.io/andymerskin/pen/LyoEmW
这是我更改的内容：
- 为
population添加了 computed getter/setter，为您提供了一种在模板中呈现数组长度的简洁方法，并能够使用app.population = Game.population在游戏循环中分配它你的Game.doPopulatePacks例程。 - 将 Vue 实例中的
data.property更改为_property以保持命名约定配对以在计算的 属性 中使用。它确实带有警告，它是 no longer proxied to avoid conflicts with Vue's internal properties，因为我们依赖于模板中计算的 属性。 （目前，在 Vue 实例中定义私有属性还没有明确的约定，尽管下划线_是 JS 中更广泛的偏好。）
这样，您将在分叉演示中看到您的游戏人口在 UI 中保持最新。