码迷,mamicode.com
首页 > 其他好文 > 详细

vue--生命周期及其作用

时间:2020-07-27 17:51:03      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:dom   methods   哪些   获取   dom节点   creat   实例   事件机制   vue   

1.创建

beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)

使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用
created:实例已经创建,仍然不能获取DOM节点(有data,没有el)
使用场景:模板渲染成html前调用,此时可以获取data和methods,so 可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里
2.载入
beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)
mounted:数据和DOM都已经被渲染出来了
使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里
3.更新
beforeUpdate:检测到数据更新时,但在DOM更新前执行
updated:更新结束后执行
使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick
4.销毁
beforeDestroy:当要销毁vue实例时,在销毁前执行
destroyed:销毁vue实例时执行

第一次页面加载会触发哪些钩子

beforeCreate、created、beforeMount、mounted

vue--生命周期及其作用

标签:dom   methods   哪些   获取   dom节点   creat   实例   事件机制   vue   

原文地址:https://www.cnblogs.com/ljygirl/p/13385364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!