/ ‍‍‍. 各 todo-item の内容を表す todo オブジェクトを与えます。 です window v3.x のドキュメントを見たい場合はこちら, もしあなたが Vue でアプリケーションを構築しているとき、メモリリークに注意する必要があります。 この Issue はシングルページアプリケーション( SPA )を設計する際には特に重要で、SPA を使っているときユーザはブラウザをリフレッシュする必要はなく、コンポーネントをクリーンアップすることとガベージコレクションが期待通りに動作することを確認することは JavaScript アプリケーションの責務です。, Vue アプリケーションのメモリリークは一般的に Vue 自体からは起こらず、むしろ他のライブラリをアプリケーションに組み込む際発生する可能性があります。, 次の例のメモリリークは Vue コンポーネント上で Choices.js ライブラリが原因で引き起こされていて正しく解放されません。それでは、どのようにして Choices.js のフットプリントを取り除くかメモリリークを回避するかを示します。, 以下の例では、たくさんのオプションを持つ select をロードしてから v-if ディレクティブを使用して show/hide ボタンを使って追加したり仮想 DOM から削除しています。この例での問題は v-if ディレクティブが DOM から親要素を取り除きますが、 Choices.js で生成された追加 DOM 部分をクリーンアップできずに、メモリリークを引き起こします。, このメモリリークを確認するためには、この CodePen の例 を Chrome で開き、そして Chrome タスクマネージャー を開きます。Chrome タスクマネージャーを Mac で開くためには、Chrome トップナビゲーション > ウィンドウ > タスクマネージャーを選択するか、 Windows の場合 Shift + ESC ショートカットを使用します。そして、 show/hide ボタンを50回またはそれ以上クリックしてください。Chrome タスクマネージャー上でメモリ使用量が増え、再利用されないことが確認できます。, 上記の例では、DOM から select を削除する前に、hide() メソッドを使っていくつかのクリーンアップとメモリリークの解決ができます。これを実現するためには、 Vue インスタンスのデータオブジェクトにプロパティを保持し、 Choices API の destroy() メソッドを使用してクリーンアップを実行します。, メモリ管理とパフォーマンステストはアプリケーションを素早くリリースする興奮のためかんたんに無視できますが、小さなメモリフットプリントを維持することは全体のユーザーエクスペリエンスにとって依然として重要です。, ユーザーが使用している可能性があるデバイスの種類と通常のフローを検討します。ユーザーはメモリが制約を受けたラップトップまたはモバイルデバイスを使用していますか?ユーザーは通常アプリケーション内をたくさん回遊していますか?これらのいずれかが当てはまる場合、良いメモリ管理方法はユーザーのブラウザをクラッシュさせる最悪のシナリオを回避させるのに役立つはずです。これらのいずれかにも当てはまらない場合でも、注意を払わなければあなたのアプリケーションの長時間の使用でパフォーマンスが低下する可能性があります。, 上記の例では、v-if ディレクティブを使用してメモリリークを説明しましたが、シングルページアプリケーションのコンポーネントに vue-router を使用してルーティングする場合、より一般的で現実的なシナリオが発生します。, v-if ディレクティブのように、vue-router は仮想 DOM から要素を削除しユーザーがアプリケーションを回遊するときにそれらを新しい要素で置き換えます。Vue beforeDestroy() ライフサイクルフックは vue-router ベースで構築されているアプリケーションの同じ種類の課題を解決することに適しています。. https://msdn.microsoft.com/ja-jp/library/dd744766(v=vs.85).aspx, - パフォーマンス モニターとリソース モニターは、Windows 7 に付属し、長時間にわたってリソースの使用量を監視してグラフに表示できます。 あなたははじめての Vue.js アプリケーションを素晴らしい Vue.js webpack テンプレート を利用して作成し、Docker コンテナで実行もできることを同僚に披露したいと思っています。. Vue.js アプリケーションを Docker 化する. $emit   C のような言語には低レベルのメモリ管理がプリミティブで備わっています、malloc(), free() のようなものです。これらのプリミティブな関数はメモリ解放を行い OS に対してメモリを割り当てるなど開発者によって明示的に使用されます。 同じように、JavaScript もオブジェクトや文字列が作成された際にメモリ割当を行い、それらがもう使用されないと判断された時に、"自動的に" メモリ開放を行います。これがいわゆるガベージコレクションというプロセスです。これは一見すると "自動的に" リソースの開 … https://codepen.io/tomshort5/pen/BaBLXvb, これは、特定のアクションの後にメモリのスナップショットを作成することで最もわかりやすくなります。ページがロードされると、単一のVueインスタンスが作成されます。, イベントを介して子が削除されるようにトリガーした後、VueComponentはメモリから削除されません。もう一度「トグル」をクリックすることと比較すると、コンポーネントがメモリから削除されていることがわかります。, 最後にクリックされたDOMノードへの参照を保持しているようです。したがって、 , // todo-item コンポーネントはカスタム属性のような "プロパティ" で受け取ります。,