Die Gründe und Lösungen dafür, dass die Hooks beforeDestroy und destroy im Vue-Projekt nicht funktionieren oder keine Wirkung zeigen

Im Projekt habe ich etwas in destroy geschrieben, aber es hat keine Wirkung gezeigt. Später habe ich herausgefunden, dass beforeDestroy auch nicht weg war, also war ich neugierig, warum? Sind die Programmierer/Programmierer, die hereinkommen, die gleichen wie ich?

  destroyed () {
    
    
    let lastTime = new Date()
    console.log(lastTime, '---------stay-----')
  }

**

Methode 1: Keep-Alive auf „false“ ändern, d. h. nicht verwenden

**
Zu diesem Zeitpunkt habe ich die Ursache überprüft und weiter gesucht. Schließlich habe ich festgestellt, dass es sehr einfach ist. Der Grund für Keep-Alive ist die integrierte Komponente von Vue . Wenn die Dynamik umbrochen wird. Wenn eine Komponente installiert wird, werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören. Ändern Sie sie also einfach und alles ist in Ordnung

<template>
  <div id="app">   
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
    {
    
    
      path: '/priceTrigger/param',
      name: 'paramStatement',
      component: resolve => require(['@/views/paramStatement'], resolve),
      meta: {
    
    
        title: '网格交易',
        keepAlive: false
      }
    },

Das ist es~
Wenn Sie Keep-Alive verwenden müssen, können Sie weiterlesen

Methode 2: Verwenden Sie die Hook-Funktion, die Keep-Alive ausführt

Möchten Sie sagen: Wow, gibt es keine Lösung? Nein, haben Sie den von Keep-Alive ausgeführten Hook vergessen, aktiviert, deaktiviert, die zwischengespeicherte Seite aufgerufen und diese beiden Hook-Funktionen? Zur Ausführung, Das Ereignis, das beim Verlassen der Seite ausgeführt wird, kann deaktiviert werden, sodass es leicht gelöst werden kann

  activated () {
    
    
    console.log('---activated:')
   }
 deactivated () {
    
    
    let lastTime = new Date()
    console.log(lastTime, '---------stay-----')
  }

Nach der Verwendung von Keep-Alive sind die aktivierten und deaktivierten Hooks zwei der wichtigeren Hook-Funktionen in Vue. Denken Sie daran, sie sich zu merken! ! !
Der Vortrag dieser Person über Keep-Alive ist sehr gut. Ich empfehle Ihnen, ihn zu lesen, wenn Sie Zeit haben

Guess you like

Origin blog.csdn.net/weixin_54256416/article/details/129183650