Vue生命周期详解
以下是 Vue 生命周期钩子函数分别做了什么事情的详细说明
详细说明
-
beforeCreate（创建前）：在实例初始化之前调用。此时，实例的数据观测 (data observer)、属性和方法的运算，以及事件配置等内部设置都已完成，但是尚未挂载到 DOM 上。在这个钩子中，我们可以进行一些数据获取或者变量声明等准备工作。
-
created（创建后）：在实例创建完成后立即被调用。在这一步，实例已经完成了以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event listener 都已经初始化，但还没有挂载到 DOM 上。在这个钩子中，我们可以进行一些组件内数据的初始化操作。
-
beforeMount（载入前）：在组件挂载之前调用。在这一步，Vue 实例已经编译模板，但是还没有挂载到 DOM 上。在这个钩子中，我们可以进行一些组件内数据的计算或者处理等准备工作。
-
mounted（载入后）：在组件挂载之后调用。在这一步，Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。在这个钩子中，我们可以进行一些页面元素的初始化或者绑定等操作。
-
beforeUpdate（更新前）：在数据更新之前调用。在这一步，Vue 实例的数据已经更新，但是虚拟 DOM 还没有重新渲染。在这个钩子中，我们可以进行一些数据校验或者条件判断等操作。
-
updated（更新后）：在数据更新之后调用。在这一步，Vue 实例的数据已经更新，虚拟 DOM 也已经重新渲染。在这个钩子中，我们可以进行一些页面元素的更新或者刷新等操作。
-
activated（激活）：在组件被激活时调用。当一个组件被复用时，例如在一个
<keep-alive>标签中，这个钩子会被调用。在这个钩子中，我们可以进行一些组件的激活状态设置或者数据恢复等操作。 -
deactivated（停用）：在组件被停用时调用。当一个组件离开
<keep-alive>标签时，这个钩子会被调用。在这个钩子中，我们可以进行一些组件的停用状态设置或者数据保存等操作。 -
beforeDestroy（销毁前）：在实例销毁之前调用。此时，实例仍然完全可用。在这个钩子中，我们可以进行一些资源释放或者清理工作等操作。
-
destroyed（销毁后）：在实例销毁之后调用。此时，所有的子实例、事件监听器和事件发射器都会被清理掉。在这个钩子中，我们不需要再进行任何操作。
-
errorCaptured（错误捕获）：当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及完整的错误堆栈信息。在这个钩子中，我们可以进行一些错误处理或者日志记录等操作。
Vue 生命周期钩子函数示例
- beforeCreate（创建前）：在实例初始化之前调用。此时，实例的数据观测 (data observer)、属性和方法的运算，以及事件配置等内部设置都已完成，但是尚未挂载到 DOM 上。
beforeCreate() {console.log('beforeCreate');
}
- created（创建后）：在实例创建完成后立即被调用。在这一步，实例已经完成了以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event listener 都已经初始化，但还没有挂载到 DOM 上。
created() {console.log('created');
}
- beforeMount（载入前）：在组件挂载之前调用。在这一步，Vue 实例已经编译模板，但是还没有挂载到 DOM 上。
beforeMount() {console.log('beforeMount');
}
- mounted（载入后）：在组件挂载之后调用。在这一步，Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。
mounted() {console.log('mounted');
}
- beforeUpdate（更新前）：在数据更新之前调用。在这一步，Vue 实例的数据已经更新，但是虚拟 DOM 还没有重新渲染。
beforeUpdate() {console.log('beforeUpdate');
}
- updated（更新后）：在数据更新之后调用。在这一步，Vue 实例的数据已经更新，虚拟 DOM 也已经重新渲染。
updated() {console.log('updated');
}
- activated（激活）：在组件被激活时调用。当一个组件被复用时，例如在一个
<keep-alive>标签中，这个钩子会被调用。
activated() {console.log('activated');
}
- deactivated（停用）：在组件被停用时调用。当一个组件离开
<keep-alive>标签时，这个钩子会被调用。
deactivated() {console.log('deactivated');
}
- beforeDestroy（销毁前）：在实例销毁之前调用。此时，实例仍然完全可用。
beforeDestroy() {console.log('beforeDestroy');
}
- destroyed（销毁后）：在实例销毁之后调用。此时，所有的子实例、事件监听器和事件发射器都会被清理掉。
destroyed() {console.log('destroyed');
}
- errorCaptured（错误捕获）：当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及完整的错误堆栈信息。
errorCaptured(err, instance, info) {console.log('errorCaptured', err, instance, info);
}