So löschen Sie den Timer elegant in Vue

Vorwort

Lösche den Timer. Ich glaube, viele Leute schreiben das so:

Standard exportieren {
  Daten() {
    zurückgeben
      Timer: null
    }
  },
  
  montiert() {
    dieser.timer = setzeInterval(() => {
      console.log('Intervall festlegen')
    }, 2000)
  },
  
  vorZerstören() {
    Intervall löschen(dieser.Timer)
  }
}

Dies ist ein gängiger Codeabschnitt. Zumindest einige meiner Freunde (mit 1-3 Jahren Erfahrung) schreiben ihn so. Hier gibt es drei unelegante Probleme:

• Nach dem ClearInterval wird der Timer nicht gelöscht und ist null.
  
• Der Code zum Starten und Löschen des Timers ist auf zwei Stellen verteilt, was die Lesbarkeit/Wartungsfähigkeit beeinträchtigt. Mit den Worten von You Dada: Dadurch wird es schwieriger, das, was wir erstellt haben, programmgesteuert zu bereinigen.
• Der Timer ist in den Daten definiert. Tatsächlich erfordert der Timer keine Reaktion. Es ist nicht notwendig, ihn in den Daten zu definieren, da dies zu Leistungseinbußen führen würde.

Optimierung

Direkt zum Code:

Standard exportieren {
  Daten() {
    zurückgeben
    }
  },
  
  montiert() {
    let timer = setzeInterval(() => {
      console.log('Intervall festlegen')
    }, 2000)
    dies.$once('hook:beforeDestroy', () => {
      Intervall löschen(Timer)
      Timer = null
    })
  }
}

Hier wird ein Hook verwendet, um den Lebenszyklus von beforeDestroy zu überwachen, sodass der Timer nur im Lebenszyklus definiert werden muss und alle oben genannten Probleme gelöst sind.

Ableitungsfrage: Wird beforeDestroy nicht ausgelöst?

Im Backend-System richten wir häufig Seitencaches ein. Wenn die Route durch Keep-Alive zwischengespeichert wird, wird der Lebenszyklus von beforeDestroy nicht eingehalten. Daher denken manche Leute, dass es ausreicht, den Timer in beforeDestroy zu löschen, und überprüfen nicht einmal, ob der Timer tatsächlich gelöscht wurde. Die Ursache lässt sich mithilfe aktivierter und deaktivierter Hooks leicht ermitteln:

Standard exportieren {
  Daten() {
    zurückgeben
    }
  },
  
  montiert() {
    let timer = setzeInterval(() => {
      console.log('Intervall festlegen')
    }, 2000)
    dies.$on('hook:activated', () => {
      if (timer === null) { // Wiederholte Timer-Aktivierung vermeiden timer = setInterval(() => {
          console.log('Intervall festlegen')
        }, 2000)
      }
    })
    dies.$on('hook:deaktiviert', () => {
      Intervall löschen(Timer)
      Timer = null
    })
  }
}

Hierbei ist zu beachten, dass aus Caching-Gründen eher $on als $once verwendet werden sollte, da es sonst nach einmaliger Ausführung nicht erneut ausgelöst wird.

Dies ist das Ende dieses Artikels zum eleganten Löschen des Timers in Vue. Weitere relevante Inhalte zum Löschen des Timers in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!