我能知道一个组件在 vue 中挂载了多少次吗？答案

【问题标题】：can i know how many times a component mounted() in vue?我能知道一个组件在 vue 中挂载了多少次吗？
【发布时间】：2020-07-13 02:14:17
【问题描述】：

我只是想知道有什么方法可以计算出组件在 vue 中挂载了多少次？我试过在 mount() 这样的方法中计数，

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

mounted() {
 this.mountedCnt += 1
}

并且肯定它没有工作。大声笑我想也许我可以通过在 vuex 中设置数据来计数，但我想在组件内进行，而不是使用 vuex 或其他东西..

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我的想法是使用keep-alive 让您的组件保持活力，这样您就不会丢失其中的数据。

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

现在您可以使用activated增加您的计数器

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

activated() {
 this.mountedCnt += 1
}

您的缺点是您的组件不会被破坏，因此您的数据不会被重置。这是否是劣势取决于您。

其他解决方法是将其保存在本地存储中，并在使用 created() 创建组件时获取它

【讨论】：

非常感谢。我什至不知道有一个保活..的东西..？ :D 哈哈，我认为使用 destroy() 方法可能适用于许多情况！！ :)

【解决方案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>

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

【讨论】：

啊这个也很容易工作。我会尝试做一些测试。非常感谢！我会学习更多:)
hmm 从来没有想过把东西放在“外面”

【解决方案3】：

在组件内部，如果您计算挂载次数，变量将在每次重新挂载时重置。您将无法保留它。

一种方法是您可以在mounted 中执行console.log()。或者您可以使用Vuex 处理此类情况。

【讨论】：