浅谈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.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。下面这篇文章主要给大家介绍了关于利用Vue.js实现求职在线之职位查询功能的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要给大家介绍了关于vue中三元表达式的相关资料,众所周知三元表达式用来根据参数的不同执行不同的代码是很方便的,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue项目组件化工程开发实践方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
这篇文章主要介绍了vue 项目@change多个参数传值多个事件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
这篇文章主要介绍了vue源码入口文件分析(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue mockjs编写假数据并请求获取实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
本文主要介绍了element表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue webpack build资源相对路径的问题及解决方法
这篇文章主要介绍了vue webpack build资源相对路径的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了使用Vue逐步实现Watch属性详解，watch对象中的value分别支持函数、数组、字符串、对象，较为常用的是函数的方式，当想要观察一个对象以及对象中的每一个属性的变化时，便会用到对象的方式2022-08-08
最新评论