每个Vue实例或者组件被创建的时候,都会经过一系列的底层代码实现。而vue实例或者组件的生命周期大致可以分为三个时间段:
初始化、运行中、销毁
下面引用一张vue官方网站的插图
1、初始化
初始化阶段我们会去new一个实例或者一个组件,在里面配置一些数据。
第一个钩子函数
beforeCreate
这个钩子函数在初始化阶段就会立即执行(不需要调用)
但是这个函数拿不到实例或者组件中的数据,此时此刻,页面中dom和虚拟dom都没有挂载出来,所以这个钩子 基本没啥用。。。
第二个钩子函数
created
这个函数执行的时候,内部数据已经可以拿到了,但是dom还没有挂载出来,所以在这个函数中同步的更改数据,运行阶段的钩子函数是不会执行的,并且dom也没有渲染,在这个函数中也拿不到dom节点。这个函数中 可以写ajax和一些事件的绑定操作。
第三个钩子函数
beforeMount
这个函数和第二个钩子函数差不多,这个时候开始去判断是实例还是组件
也可以进行发送请求和事件绑定
第四个钩子函数
mounted
这个时刻,生成好了虚拟dom,并且在vue中又一个render函数,将虚拟dom初始化渲染为真实dom,那么这个函数就能拿到页面上的真实dom了。
运行中
第五个钩子函数
beforeUpdate
这个时候,如果对数据进行更改,那么就会触发这个函数(自己不会触发),然后vue内部用diff算法更新虚拟dom,再将虚拟dom不同的地方渲染,但是这个函数拿不到重新渲染的dom
第六个钩子函数
updated
这个函数就是,等一切都完毕了,更改的数据也渲染成真实dom了之后,才会触发,能拿到所有的东西。
第七个钩子函数
beforeDestory
当这个组件或实例要销毁的时候触发,
但函数中还没有真正销毁,可以询问是否销毁
第六个钩子函数
destoryed
这个函数执行了,那么生命就到 了尽头,组件或者实例就销毁完成了,接触了事件和定时器等操作,但是dom依然存在
Vue中的生命周期和生命周期中的钩子函数
最新推荐文章于 2024-04-11 03:53:16 发布