山地人

组件生命周期

山地人
山地人
2021-05-13

Vue在组件从创建到消亡的整个生命周期中对不同的阶段提供了不同的钩子函数,方便使用者对组件不同阶段进行处理。

下面的例子,我们输出下组件在各个阶段的日志。

代码分析

通过上面的例子,在最初创建和渲染组件的阶段,组件经历了下面这些大的阶段。

组件生命周期的几个大阶段:
----- [before create]
创建
----- [created]
----- [before mount]
挂载
----- [mounted]
----- [before unmount]
卸载
----- [unmounted]

创建、挂载和卸载,在这三个阶段的前后,Vue为我们提供了对应的钩子函数。 方便我们在不同阶段对组件进行调整控制。

数据更新阶段

在数据发生变动,需要更新组件时,还会有一个更新阶段。这个阶段发生在挂载卸载阶段之间。

...
挂载
----- [mounted]
----- [before update]
更新
----- [updated]
...

下面的例子,我们输出下组件在各个阶段的日志。

代码分析

  • beforeUpdate钩子函数,发生在DOM更新之前,如果在更新前需要做一些处理,可以在这个阶段进行
  • updated钩子函数,发生在DOM更新之后,如果DOM更新结束后,我们还要做一些后续处理可以在这个钩子函数中进行。

至此,我们已经对vue的生命周期了解的比较清楚了。

原生JavaScript写法

按照惯例,我们也对照着Vue的功能,用原生JavaScript实现一版生命周期功能