Vue的生命周期函数

2020-10-02  本文已影响0人  前端小阿坤

每一个Vue实例或者组件都有一个完整的生命周期,一个完整的生命周期包括初始化阶段、运行中阶段和销毁阶段。

初始化阶段:

1.实例、组件被创建出来以后,就会被初始化事件和生命周期。然后就会执行beforeCreate钩子函数,这个时候,数据没有被挂载到,也不能获取真实dom,只是一个空壳,一般不做操作。

2.挂载数据、绑定事件后,然后执行created钩子函数,这个时候可以获取到数据,一般在这个阶段做一些数据操作,比如ajax请求等异步请求。

3.找到实例或者组件的对应的模板,编译模板将虚拟dom放入到render函数中 马上就要进行渲染,然后执行beforeUpdate钩子函数,这个时候虚拟dom马上就要被渲染成真实dom,在这个阶段也可以进行一些数据的操作,并且不会因此而触发updated钩子函数。

4.render函数将虚拟dom被渲染成真实dom,然后执行created钩子函数,这个阶段既可以获取数据,也可以获取到真实dom,所以可以在这个 阶段进行dom的操作。

运行中阶段:

5.当组件、实例数据发生更改后,会立即执行beforeUpdate钩子函数,构建新的虚拟dom与之前的虚拟dom进行diff算法比较之后进行重新渲染,一般不做操作。

6.当更新完成后,执行updated,数据已经更改完成,dom也重新渲染,可以获取到更新后的数据。

销毁阶段:

7.当调用$distroy方法后,立即执行beforeDestroy钩子函数,一般可以在这里做一些善后操作,比如清除计时器等。

8.组件、实例的数据绑定和事件监听等去掉后只剩些一个dom空壳,然后执行distroyed钩子函数。



上一篇 下一篇

猜你喜欢

热点阅读