могу я узнать, сколько раз компонент монтировался () в vue?

Question

Мне просто интересно, могу ли я как-нибудь выяснить, сколько раз компонент монтировался () в vue? Я пробовал count в таких методах, как mount (),

data() {
 return {
   mountedCnt: 0
 }
},

mounted() {
 this.mountedCnt += 1
}

, и наверняка это не сработало. lol Я думаю, что, может быть, я смогу посчитать, установив данные в vuex, но я бы хотел сделать это внутри компонента, не используя vuex или другие вещи ..

Answer 1

Я думаю о том, чтобы поддерживать работу вашего компонента с помощью keep-alive, чтобы вы не потеряли свои данные внутри него.

<keep-alive>
   <yourComponent></yourComponent>
</keep-alive>

Теперь вы можете увеличить свой счетчик с помощью activated

data() {
 return {
   mountedCnt: 0
 }
},

activated() {
 this.mountedCnt += 1
}

У вас есть недостаток в том, что ваш компонент не разрушается, и поэтому ваши данные не сбрасываются. Что ж, решать вам, недостаток это или нет.

Answer 2

Вы можете легко сохранить некоторое постоянное состояние вне компонента. Например (при условии, что компоненты с одним файлом)

<template>
  <p>I've been mounted {{ mountedCnt }} times</p>
</template>

<script>
let mountedCount = 0 // persisted in-memory here

export default {
  data: () => ({ mountedCnt: mountedCount }),
  mounted () {
    this.mountedCnt = ++mountedCount // increment "mountedCount"
  }
}
</script>

Demo ~ https://codesandbox.io/s/gracious-borg-1sosu?file= / src / components / MountedCount. vue

Answer 3

Внутри компонента, если вы посчитаете время монтирования, переменная будет сбрасываться при каждом повторном подключении. Вы не сможете сохранить его.

Один из способов - вы можете сделать console.log() внутри mounted. Или вы можете использовать Vuex для такого сценария ios.