浅谈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都可以
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!