首页 > 编程知识 正文

vue有几个生命周期(react组件的生命周期)

时间:2023-05-06 15:16:48 阅读:80054 作者:719

在vue中,每个组件或实例都有一个生命周期,分为三个阶段:

初始化、运行中、废弃

在生命周期中,在实例、组件为new Vue )中创建后,总结了八个过程:初始化事件和生命周期,然后执行beforeCreate挂接函数。 此时,数据尚未装载,无法访问数据和实际的dom,通常不会操作

装载数据、绑定事件等,执行created函数。 此时,可以已经使用数据,也可以更改数据。 在此处更改数据不会启动updated函数。 在此,您有机会在渲染前第二次修改数据。 不启动其他挂接函数。 通常在这里获取初始数据

然后,开始查找与实例或组件对应的模板。 编译模板,为虚拟dom放入render函数中,准备渲染,然后执行beforeMount挂接函数。 此函数将创建虚拟dom,并立即进行渲染。 在此也可以不触发更新就更改数据。 在此,您有机会在渲染之前最后修改数据,而不会触发其他挂接函数。 一般在这里进行

然后开始render,渲染实际的dom,执行mounted挂钩函数。 此时,组件已经出现在页面上,数据、实际的dom已经处理完毕,事件已经挂载,可以在这里操作实际的dom等事情.

组件或实例的数据一发生变化,就会立即执行beforeUpdate,通过vue的虚拟dom机制重构虚拟dom,使用上次的虚拟dom树和diff算法进行比较后,通常什么也不做

更新完成后,运行更新后,数据更改完成,dom也重新渲染完成,可以操作更新后的虚拟dom

如果以某种方式调用$destroy方法,则会立即执行beforeDestroy。 通常,在此进行计时器清除、非命令绑定事件清除等的后期处理

组件的数据绑定、拦截.去除后,只剩下dom的外壳。 这时,可以运行destroyed,在这里收拾残局。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。