Vue.jsコンポーネントを削除するベストプラクティス

Question

私のウェブサイトは、ページの読み込みを要求するのではなく、特定のDOMを上書きします。時には、DOM内にいくつかのVue.jsコンポーネント（すべてが単一ページコンポーネントです）が上書きされます。それらのほとんどは、コンポーネントを構築する唯一の目的のために作成されたアプリにあります。

つの質問：

1. は、私は、これらのコンポーネントを破壊する必要がありますか？はいの場合：どのように？

2. この方法にはより良い解決策がありますか？

Answer 1

は完全に仮想マシンを破壊するコンポーネント

を消去するために破壊するコマンドがあります。既存の他のvmsとの接続をクリーンアップし、すべてのディレクティブのバインドを解除し、すべてのイベントリスナをオフにします。 beforeDestroyと破棄されたフックをトリガします。

https://vuejs.org/v2/api/#vm-destroy

しかし、あなたは唯一の削除は、/ 1鉱石多くのインスタンス（.$mount()またはel: "#app"経由でマウントされているもの）の内側にある部品を、非表示にしたい場合は、経由してコンポーネントを削除しようとする必要がありますv-ifまたはv-showで非表示にします。 $destory()が行うようv-ifが同じようにDOMからコンポーネントを削除する一方、V-ショーはちょうどdisplay:noneを設定します

<my-component v-if="showMyComponent"></my-component> 
<my-component v-show="showMyComponent"></my-component> 

：インスタンスのテンプレートで

が、これは次のようになります。 https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Answer 2

あなたは、ローカルデータ小道具を使用してディレクティブV-ショーと答えのためのV-IF

<div id="application"> 
    <vm-test v-if="active"></vm-test> 
    <div @click="toggle()">toggle</div> 
</div> 

Vue.component('vm-test', { 
    template: '<div>test</div>' 
}); 

var vm = new Vue ({ 
    el: "#application", 
    data: function() { 
     return { 
      active:true 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.active = !this.active; 
     } 
    } 
}) 

https://jsfiddle.net/99yxdacy/2/