浅谈vue的生命周期
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都可以
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要为大家详细介绍了vue实现简单滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了vue实现竖屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了前端使用elementUI select选择器实现远程搜索，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue3 源码解读之 time slicing的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家介绍了Vue之Axios异步通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下2024-02-02
使用Vue做双向绑定的时候，可能经常会用到分页功能，接下来通过本文给大家分享一个封装分页组件的方法，一起看看吧2016-12-12
这篇文章主要介绍了vue实现公共方法抽离，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue项目中Element UI组件未注册的问题原因及解决方法
在 Vue 项目中使用 Element UI 组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题的原因、解决方法,以及如何在需要时撤销相关操作,需要的朋友可以参考下2025-01-01
最新评论