P5JとVueJsを使用したデータ初期化とウォッチャー

Question

私は進化的アルゴリズムを使って作業し、プロセスの可視化ツールを構築しようとしているので、P5JでVueJsを使用したいと思います。 私はこのコードを持っています：(SO) Playing with Evolutionary Algorithms on Codepen.io

問題は、Vueインスタンスのデータ​​が正しく更新されないということです。私がしようとしたものをここで

：

• は、VueのインスタンスのデータとしてグローバルオブジェGameを渡します。その後、​​が正しく更新されますが、データが非常に大きく、すべてが遅くなります。
• 宣言されたときに配列Game.populationを埋め込みますが、機能しません。P5JSがエラーcreateVector() is not definedを投げます。
• VueインスタンスのbeforeCreate()メソッドにGame.population配列を設定します。それはどちらもうまくいきません。私に他のエラーを与える;興味深いのセルのデータをキュレーション（私はpos属性を必要としない）ので、createVector()エラーを回避するため、グローバルまたはVueのインスタンスのbeforeCreate()方法で宣言された他のオブジェクトDataによって
• プロキシGame.population。それは行き詰まりです。
• 吊り上げを考えて、私はVueJSがP5JSを実行する前に初期化されているのか疑問に思いました。そうです。しかし、私はそれを変える方法を理解することはできません。

ここで問題は何ですか？ VueインスタンスのデータとGame.populationをリンクできるように、スクリプトをどのようにリファクタリングする必要がありますか？

Answer 1

この解決策は、GameオブジェクトをVueインスタンスに投げ込むほどのものではありませんが、機能します。

ここにフォークさ

：https://codepen.io/andymerskin/pen/LyoEmW

は、ここで私は変わっものです：

1. はあなたに、テンプレート内の配列の長さをレンダリングするためにきれいな方法、および割り当てる機能を与え、​​ためcomputed getter/setterを追加しましたGame.doPopulatePacksルーチンのapp.population = Game.populationを使用してゲームループに入れます。
2. Vueインスタンスのdata.propertyを_propertyに変更して、命名規則を計算プロパティ内で使用するためにペアにしました。テンプレートの計算されたプロパティに傾いているので、no longer proxied to avoid conflicts with Vue's internal propertiesという警告が表示されます。 は（現時点では、アンダースコア_がより広くJSで好みであっても、Vueのインスタンスでプライベートプロパティを定義するための明確な規則はありません。）

ということで、あなたはフォークで表示されますあなたのゲームの人口はUIの中で最新のままであることをデモする。