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

Vue 生命周期钩子函数示例

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);
}