Vue.js 生命周期钩子答案

【问题标题】：Vue.js lifecycle hooksVue.js 生命周期钩子
【发布时间】：2020-01-15 11:45:52
【问题描述】：

我确信 Vue 中的生命周期钩子是 8 个（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroy），但今天我发现（https://vuejs.org/v2/api/#activated）还有 3 个：

• 激活

• 停用

• 捕获的错误

有人可以解释这三个是如何工作的吗？是否可以使用 console.log 测试它们？（只是为了了解它们何时被调用）

【问题讨论】：

当然是你？
叫他们的时候我听不懂，为什么不解释一下？

标签： vue.js vuejs2 vue-component nuxt.js

【解决方案1】：

首先，一点上下文：

在 Vue 2.0+ 中，有一个名为 <keep-alive> 的内置组件，它获取其中的子元素并将其作为缓存组件在内存中保持活动状态。通常，如果组件的 props 发生变化，Vue 会重用组件，但可能组件非常复杂且更新缓慢。您可以使用 <keep-alive> 包装它，并且该组件将被缓存以供提供给它的道具。

当<keep-alive> 中的组件更新时，activated 生命周期钩子会被调用。当该组件被缓存并放在一边时，deactivated 生命周期钩子被调用。

errorCaptured 生命周期钩子是在 Vue 2.5.0 中添加的，只要后代组件捕获到错误就会调用它。因此，如果您有一个名为 A 的组件，该组件有一个名为 B 的子组件，并且有一个名为 C 的子组件，那么如果 C 捕获并出错，则将在 A 和 B 上调用 errorCaptured 生命周期挂钩。

这些钩子的工作方式与任何其他钩子相同，因此请以相同的方式使用它们。

export default {
    data() {
      return {}
    },
    mounted() {
      console.log('mounted hook called')
    },
    errorCaptured(err, vm, info) {
      console.log('error captured in component', vm)
      console.error(err)
      console.log('error info:', info)
    },
    activated() {
      console.log('cached component is being used again')
    },
    deactivated() {
      console.log('component is being kept alive in cache for now')
    }
}

【讨论】：

我试过这样，但 activated 和 deactiveted 的 console.log() 没有显示。你可以在这里看到它codepen.io/93lucasp/pen/VwZdQyz
你也可以在这里看到我尝试过的forum.vuejs.org/t/vue-js-lifecycle-hooks/74119/7 但无法显示console.log()
我正在查看您的 codepen，当在组件 1 和组件 2 之间切换时，它在控制台中显示 activated() 和 deactivate()。
我变了，我发现了！
太棒了。继续接受答案，我们都可以继续前进。 :)

【解决方案2】：

我知道这个答案已经晚了，但有人可能也在寻找答案问题。 Vue.js 默认禁用了 console.log 功能，所以我们必须启用它。

只需将 "rules": { "no-console": "off",} 放在 package.json 上

干杯

【讨论】：