Vue.jsで多くのコメント（300+のような）を持つコメントシステムを作成しています。Vue.js：コンポーネントをコピーする代わりに、コンポーネントを「移動」して共有しますか？
コメント（下記のComponentと表示されます）の管理セクションがあります。コメントにカーソルを置くと、管理セクションが表示されます。
300件のコメントがある場合、管理セクションのコンポーネントは300回のようにコピーされますが、コンピュータでもモバイルには適していません（が多すぎます）。
私は何を考えていることである：それはこのように一つだけの管理セクションが存在しますので、コメント周りそれを動かすことにより、同じコンポーネントを共有することは可能ですか？
私は、ページ内の任意の場所に共通のコンポーネントを移動することができます任意の技術を認識していないです。これは通常jQueryの世界で行われますが、非常に面倒で難しいコードになります。
コメントで@Nilsで述べたように、v-ifを使用するとDOMのフローティングコンポーネントがレンダリングされません。したがって、それはページの重量を増加させず、あなたのページは（相対的に）速く感じるでしょう。
技術的には、Vue.jsが1000sの行を描画するのに慣れていても差はありません。 http://www.stefankrause.net/wp/?p=316（カラフルな表をクリックするといくつかの興味深い統計情報が表示されます）
以下の作業例では、「Do something」ボタンは、コメントフィールドの1つにカーソルを置いた後にのみDOMに入ります。それまでは、DOMにレンダリングされません。
Vue.component('comment-block', {
props: ["comment"],
template: `
<div class="comment" @mouseenter="displayOptions=true" @mouseleave="displayOptions=false">
<div class="author">{{comment.author}} wrote:</div>
<input type='text' v-model='comment.message'/>
<div class="options" v-if="displayOptions"><button>Do something</button></div>
</div>`,
data: function(){
return {
displayOptions: false
}
}
});
new Vue({
el: '#app',
data: {
comments: [
{id: 0, author: 'Bob', message: "This is my comment #1"},
{id: 1, author: 'Frank', message: "Comment #2"},
{id: 2, author: 'Joe', message: "One more comment in this page (#3)"}
]
}
});body {
margin: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.comment {
padding: 5px;
}
.comment .author {
display: inline-block;
width: 120px;
text-align: right;
}
.comment input {
display: inline-block;
width: 240px;
}
.comment .options {
display: inline-block;
}<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<body>
<div id="app">
<p>List of comments:</p>
<comment-block :comment="comment" v-for="comment in comments"></comment-block>
</div>
</body>注：は "何かをする" ボタンはまだ何もしない、単にこの例では、最大表示以外。
これはインターフェイスを維持する1つの方法ですが、上記のパフォーマンス分析のブログ記事で説明したように、このマイクロ最適化は実際問題はありません。
（ 'v-show'とは対照的に）' v-if'指示文を見てください。それは通常、トリックを行う必要があります。 – nils