浅谈vue的生命周期
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
1.什么是生命周期?有什么作用?
每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想在页面渲染之后弹出广告,那我们们最早可以再mounted中进行.
2.第一次加载页面会触发哪几个钩子?
beforeCreate created beforeMount mounted
3.简述每个周期应用于哪个场景?
beforeCreate
:在new一个实例后,只有一些默认的生命钩子和默认事件,其他的东西还没有创建,在beforeCreate生命周期执行时,data和methods中的数据还没有初始化,不能在这个阶段使用data中的数据和methods的方法.
created
:data和methods中的数据都已经初始化好了,如果调用methods中的方法和操作data中的数据最早在这个阶段进行.
beforeMount
:执行这个钩子事,内存中已经编译好了模板,但是还没有挂载到页面中,此时的页面还是旧的
mounted:
执行到这个钩子时,说明vue实例已经初始化完成,此时组件脱离了创建阶段进入到了运行阶段,如果需要某些插件操作dom节点,那我们们最早可以再mounted中进行
beforeUpdate
:当执行这个钩子时,页面还是旧的,data中的数据是更新后的,但是页面的数据和data中的数据还没有同步.
updated:
页面和data中的数据保持同步,页面是新的了.
beforeDestory
:vue实例开始从运行阶段进入销毁阶段,这时,data和methods,指令,过滤器.......都是可用的,还没有真正销毁.
destoryed
:这时,data和methods,指令,过滤器.......都是不可用的,组件已经被销毁了.
4.created和mounted的区别
created
在模板渲染成html前调用,即通常初始化某些属性值,然后在渲染成视图.
mounted
在模板渲染成html后调用,通常是页面初始化之后,再对dom节点进行操作时.
5.vue在哪个生命周期获取数据?
一般created
/beforeMount
/mounted
都可以
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
关于vue3.0中的this.$router.replace({ path: ''/''})刷新无效果问题
这篇文章主要介绍了关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-01-01element table数据量太大导致网页卡死崩溃的解决办法
当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下2023-02-02
最新评论