vue生命周期可以分为八个阶段,分别是:

	beforeCreate(创建前)
	created(创建后)
	beforeMount(载入前)
	mounted(载入后)
	beforeUpdate(更新前)
	updated(更新后)
	beforeDestroy(销毁前)v
	destroyed(销毁后)

在这里插入图片描述
1,创建前(beforeCreate)

对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。

2,创建后(created)

对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。

3,载入前(beforeMount)

对应的钩子函数是beforeMount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,
下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。

4,载入后(mounted)

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。

5,更新前(beforeUpdate)

对应的钩子函数是beforeUpdate。在这一阶段,vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。

6,更新后(updated)

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7,销毁前(beforeDestroy)

对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新,当我们不再需要vue操纵DOM时,
就要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前会触发beforeDestroy钩
子函数。

8,销毁后(destroyed)

对应的钩子函数是destroyed。在销毁后,会触发destroyed钩子函数。

还有在组件之间切换的时候都会请求一些请求过的数据,每次请求都会导致重复渲染影响性能。这些数据可以存到缓存。此时使用keep-alive将组建包裹起来。但这样以上八种生命周期钩子将失效。取而代之的时activate和deactivated

activate:是在被包裹组建被激活的状态下使用的生命周期钩子
deactivated:在被包裹组件停止使用时调用
Logo

前往低代码交流专区

更多推荐