Vue.js 生命周期钩子

Posted 2023-02-23

【中文标题】Vue.js 生命周期钩子

【英文标题】：Vue.js lifecycle hooks

【发布时间】：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 测试它们？ （只是为了了解它们何时被调用）

【问题讨论】：

当然是你？

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

【参考方案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')
    

https://vuejs.org/v2/api/#activated https://vuejs.org/v2/api/#deactivated https://vuejs.org/v2/api/#errorCaptured

【讨论】：

我试过这样，但 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 上

干杯