Vue 生命周期

214 阅读2分钟

vue生命周期是什么

很普遍的一个vue知识点问题,面试的时候也会问到,答案当然就是,Vue组件实例从创建到销毁的一个过程,可以在这个过程中执行JS代码,在不同的时刻进行不同的操作

vue生命周期都有什么呢

beforeCreate (实例创建前)

created (实例创建后)

beforeMount (挂载前)

mounted (挂载后)

beforeUpdate (数据更新前)

updated (数据更新后)

beforeDestroy (销毁前)

destroyed(销毁后)

在这里插入图片描述

beforeCreate (实例创建前)

该阶段组件未被创建,也无法访问数据,均为undefined

在这里插入图片描述
在这里插入图片描述

created (实例创建后)

该阶段数据已经进行绑定组件也已经创建完成,组件中的data对象已经存在,可以对data进行操作,但是HTML模板还未被渲染,所以el为undefined,一般情况下在该阶段就会将进行数据初始化,和数据请求,请求接口赋值。

在这里插入图片描述
在这里插入图片描述

beforeMount (挂载前)

该阶段HTML模板还未被渲染,但是可以操作data数据

在这里插入图片描述
在这里插入图片描述

mounted (挂载后)

该阶段是页面渲染完成后执行,可以获取到数据以及节点 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:

在这里插入图片描述
在这里插入图片描述

beforeUpdate (数据更新前)

该阶段是在数据发生改变之前使用,你可以在该阶段保存某个数据更新之前的值,后面如果再用到可以直接使用。在有特殊需求的情况下,可以将更新之前的数据存起来,放到后面去使用。

updated (数据更新后)

该阶段是在数据发生改变之后,数据已经渲染到DOM,即监控数据的变化,当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之

BeforeDestroy(销毁前)

该函数在实例销毁之前调用,这里的 ref 依旧可以操作,实例仍然完全可用,可以在这里做清除定时器的操作,防止内存泄漏。

Destroyed(销毁后)

该函数在组件销毁的时候执行,即实例销毁后调用,这里的 ref 不存在。

该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

本文章仅以自己防止忘记而记录,不管是我还是其他人,当你看到这篇文章的时候说明你还在从事前端工作,或者在学习前端,所以不管以后遇到什么问题,和挫折,都不要忘记你敲代码的初衷