Kann Vue JS (v2) nicht daran hindern, Komponenten wiederzuverwenden

Question

Ich habe eine Vue-App, die Sätze der gleichen Komponente bedingt anzeigt, ich möchte an die erstellten oder bereitgestellten Methoden anknüpfen, aber Vue wird früher weiter verwendet Komponenten und nicht die Methoden auslösen. Ich habe versucht, die Komponenten in Keep-Alive-Tags ohne Wirkung zu machen.

Der folgende Code zeigt, was Sie auf der Seite erwarten würden: Die Änderung von someVariable zu 'test1' oder 'test2' zeigt die relevanten Komponenten, aber die erstellten/mounten Methoden werden nur zweimal ausgelöst (zB test1 'protokolliert die Erstellung und das Mounten von 1 Komponente mit dem Label type1 und ändert dann in' test2 'nur 1 weitere Komponente mit dem Label type3).

Aktuell V2.1.10

HTML

<div id="app"> 
    <div v-if="someVariable === 'test1'"> 
     <keep-alive> 
      <test-component data-type="type1"></test-component> 
     </keep-alive> 
    </div> 

    <div v-if="someVariable === 'test2'"> 
     <keep-alive> 
      <test-component data-type="type2"></test-component> 
     </keep-alive> 

     <keep-alive> 
      <test-component data-type="type3"></test-component> 
     </keep-alive> 
    </div> 
</div> 

JS/Vue

Vue.component('test-component', { 
    props: ['data-type'], 
    template: '<div><p>In the component: {{ dataType }}</p></div>', 
    created: function() { 
     console.log('component created: ', this.dataType); 
    }, 
    mounted: function() { 
     console.log('component mounted: ', this.dataType); 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    data: { 
     someVariable: "" 
    } 
}); 

Answer 1

Für Ihr spezielles Beispiel keep-alive aus dem zweiten entfernen, wenn der Trick sollte https://jsfiddle.net/z11fe07p/464/

Eine interessante Sache ist, dass vue scheint die zuvor gerenderten Komponente wieder zu verwenden. Wenn Sie also eine Komponente in der ersten if haben, wenn Sie mit 2 Komponenten zur nächsten if wechseln, wird eine Komponente wiederverwendet und eine neue Komponente für die zweite Komponente aus dem Block erstellt. Wenn Sie zum ersten if-Block zurückkehren, wird eine der 2 bereits gerenderten Komponenten erneut verwendet.

Wie oben erwähnt, ist ein Beobachter eher für solche Fälle geeignet, wodurch Sie die Handhabungslogik an Orten loswerden, an denen Sie nicht die volle Kontrolle haben. Sie können diesen Tipp hier in der Dokumentation https://vuejs.org/v2/api/#updated

sehen

Answer 2

Sie sollten einen Beobachter auf Ihrem someVariable anstatt zu versuchen, auf created Haken verwenden mit und mountedhooks.

Komponenten werden erstellt und beim ersten Mal montiert, wenn sie sichtbar (gerendert) sind. Es gibt KEINE "gezeigten" oder "versteckten" Haken.

Siehe https://vuejs.org/v2/guide/computed.html#Watchers:

watch: { 
    someVariable: function (newValue) { 
    // test newValue and do what you have to do! 
    } 
}