介尘部落

文学|音乐|休闲娱乐|计算机技术|地球科学|社会学——知识成就命运


vue生命周期(vue页面生命周期的运行逻辑)

1、生命周期图示

参考官网页面:Vue生命周期图示

2、Vue 的生命周期包括四个状态(记住这四个)

1、creating 状态 —-vue 实例被创建的过程
2、mounting 状态 —-挂到到真实的 DOM 节点,渲染出html页面
3、updating 状态 —-如果 data 中的数据改变就会触发对应组件的重新渲染
4、destroying 状态 —-实例销毁

3、四个状态对应 8 个方法

beforeCreate —-el选项 和 data 并未初始化,el、data都还是 undefined
created —-实例创建成功,完成了 data 数据的初始化,el选项还是是undefined,data已经定义,这里可以调用接口请求数据,为挂载到el选项对应的dom做准备


beforeMount —-完成了 el 初始化,date数据还未挂载到el选项对应的dom
mounted —-date数据挂载到el选项对应的dom,模版中的 data 数据直接显示出来了,完成挂载


beforeUpdate —-当 data 数据发生变化调用,发生在对应组件的重新渲染之前
updated —-触发对应组件的重新渲染

阅读全文
公众号-介尘阅读时光
赞赏支持
,发布于 2021-03-13 19:54

0 Responses to “vue生命周期(vue页面生命周期的运行逻辑)”

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

×