详解Vue中生命周期钩子函数的使用示例

2023-11-27 14:44:06 作者：一花一world

这篇文章主要为大家详细介绍了Vue中常见的生命周期钩子函数的使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

以下是 Vue 生命周期钩子函数分别做了什么事情的详细说明

详细说明

1.beforeCreate（创建前）：在实例初始化之前调用。此时，实例的数据观测 (data observer)、属性和方法的运算，以及事件配置等内部设置都已完成，但是尚未挂载到 DOM 上。在这个钩子中，我们可以进行一些数据获取或者变量声明等准备工作。

2.created（创建后）：在实例创建完成后立即被调用。在这一步，实例已经完成了以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event listener 都已经初始化，但还没有挂载到 DOM 上。在这个钩子中，我们可以进行一些组件内数据的初始化操作。

3.beforeMount（载入前）：在组件挂载之前调用。在这一步，Vue 实例已经编译模板，但是还没有挂载到 DOM 上。在这个钩子中，我们可以进行一些组件内数据的计算或者处理等准备工作。

4.mounted（载入后）：在组件挂载之后调用。在这一步，Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。在这个钩子中，我们可以进行一些页面元素的初始化或者绑定等操作。

5.beforeUpdate（更新前）：在数据更新之前调用。在这一步，Vue 实例的数据已经更新，但是虚拟 DOM 还没有重新渲染。在这个钩子中，我们可以进行一些数据校验或者条件判断等操作。

6.updated（更新后）：在数据更新之后调用。在这一步，Vue 实例的数据已经更新，虚拟 DOM 也已经重新渲染。在这个钩子中，我们可以进行一些页面元素的更新或者刷新等操作。

7.activated（激活）：在组件被激活时调用。当一个组件被复用时，例如在一个 <keep-alive> 标签中，这个钩子会被调用。在这个钩子中，我们可以进行一些组件的激活状态设置或者数据恢复等操作。

8.deactivated（停用）：在组件被停用时调用。当一个组件离开 <keep-alive> 标签时，这个钩子会被调用。在这个钩子中，我们可以进行一些组件的停用状态设置或者数据保存等操作。

9.beforeDestroy（销毁前）：在实例销毁之前调用。此时，实例仍然完全可用。在这个钩子中，我们可以进行一些资源释放或者清理工作等操作。

10.destroyed（销毁后）：在实例销毁之后调用。此时，所有的子实例、事件监听器和事件发射器都会被清理掉。在这个钩子中，我们不需要再进行任何操作。

11.errorCaptured（错误捕获）：当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及完整的错误堆栈信息。在这个钩子中，我们可以进行一些错误处理或者日志记录等操作。

1.beforeCreate（创建前）：在实例初始化之前调用。此时，实例的数据观测 (data observer)、属性和方法的运算，以及事件配置等内部设置都已完成，但是尚未挂载到 DOM 上。

beforeCreate() {
  console.log('beforeCreate');
}

2.created（创建后）：在实例创建完成后立即被调用。在这一步，实例已经完成了以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event listener 都已经初始化，但还没有挂载到 DOM 上。

created() {
  console.log('created');
}

3.beforeMount（载入前）：在组件挂载之前调用。在这一步，Vue 实例已经编译模板，但是还没有挂载到 DOM 上。

beforeMount() {
  console.log('beforeMount');
}

4.mounted（载入后）：在组件挂载之后调用。在这一步，Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。

mounted() {
  console.log('mounted');
}

5.beforeUpdate（更新前）：在数据更新之前调用。在这一步，Vue 实例的数据已经更新，但是虚拟 DOM 还没有重新渲染。

beforeUpdate() {
  console.log('beforeUpdate');
}

6.updated（更新后）：在数据更新之后调用。在这一步，Vue 实例的数据已经更新，虚拟 DOM 也已经重新渲染。

updated() {
  console.log('updated');
}

7.activated（激活）：在组件被激活时调用。当一个组件被复用时，例如在一个 <keep-alive> 标签中，这个钩子会被调用。

activated() {
  console.log('activated');
}

8.deactivated（停用）：在组件被停用时调用。当一个组件离开 <keep-alive> 标签时，这个钩子会被调用。

deactivated() {
  console.log('deactivated');
}

9.beforeDestroy（销毁前）：在实例销毁之前调用。此时，实例仍然完全可用。

beforeDestroy() {
  console.log('beforeDestroy');
}

10.destroyed（销毁后）：在实例销毁之后调用。此时，所有的子实例、事件监听器和事件发射器都会被清理掉。

destroyed() {
  console.log('destroyed');
}

11.errorCaptured（错误捕获）：当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及完整的错误堆栈信息。

errorCaptured(err, instance, info) {
  console.log('errorCaptured', err, instance, info);
}

到此这篇关于详解Vue中生命周期钩子函数的使用示例的文章就介绍到这了,更多相关Vue生命周期钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！