vue那个生命周期函数操作dom_vue生命周期

1. What ?

Vue生命周期简单来说就是vue实例对象从创建之初到销毁的过程。vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

其中具体分为8个阶段,分别是:

beforeCreate(创建前) ------- created(创建后)

beforeMount(载入前) -------- mounted(载入后)

beforeUpdate(更新前) -------- updated(更新后)

beforeDestroy(销毁前)-------- destroyed(销毁后)

2. How ?

话不多说,上图:

1、创建前(beforeCreate)

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

vue实例的挂载元素el和数据对象data都是undefined,还没有初始化。

2、创建后(created)

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

vue实例的数据对象data有了,可以访问里面的数据和方法,未挂载到DOM,el还没有

3、载入前(beforeMount)

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

4、载入后(mounted)

moun


版权声明:本文为weixin_39819671原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。