深入解析vue生命周期

发布时间:2023年12月27日

vue实例中从创建——>销毁的过程即vue生命周期

1.创建 2.初始化数据 3.编译template 4.挂载DOM 5.渲染 6.更新渲染 7.卸载

常见生命周期流程

  • beforeCreate:实例创建之初
  • created:组件已经创建完成,异步请求获取数据,dom并没有生成
  • beforeMount:组件挂载之前
  • mounted:组件挂载之后,异步请求获取 render dom更新 页面变化
  • beforeUpdate:数据发生变化,更新之前
  • beforeDestroy:实例销毁前
  • destroyed:销毁后
  • activated:keep-alive 组件激活
  • deactivated:keep-alive 组件停用
  • errorCaptured:捕获实例错误

在这里插入图片描述

  • 如何回答vue的生命周期才能令面试官满意呢?
new Vue() const vm = new Vue(){} //创建空的实例对象
init events lifecycle
//beforeCreate
init reactivity data injection methods
//created
option
-yes
-false el option vm.$mount(el)

template
-yes compile
-no el outerHTML as template
//beforeMount 此时模板已经编译好,但页面未更新
vm.$el replace $el
//mounted 在dom上进行渲染完成
//beforeUpdate 
VDOM re-render patch
//updated
//beforeDestroy
data methods filter directive 可用
//destroyed
  • 在谈到Vue的生命周期的时候,首先需要创建一个实例,也就是在 new Vue ( ) 的对象过程当中,先执行了init(init是vue组件里面默认去执行的)
  • 在init的过程当中首先调用了beforeCreate,然后在injections(注入)和reactivity(反应)的时候,它会再去调用created。
  • 所以在init的时候,事件已经调用了,我们在beforeCreate的时候千万不要去修改data里面赋值的数据,最早也要放在created里面去做(添加一些行为)。
  • 当created完成之后,它会去判断instance(实例)里面是否含有“el”option(选项)
  • 如果没有的话,它会调用vm.$mount(el)这个方法,然后执行下一步;
  • 如果有的话,直接执行下一步。
  • 紧接着会判断是否含有“template”这个选项,如果有的话,它会把template解析成一个render function ,这是一个template编译的过程,结果是解析成了render函数
  • render函数是发生在beforeMount和mounted之间的,这也从侧面说明了,在beforeMount的时候,$el还只是我们在HTML里面写的节点,然后到mounted的时候,它就把渲染出来的内容挂载到了DOM节点上。
  • 这中间的过程其实是执行了render function的内容
  • beforeMount在有了render function的时候才会执行,当执行完render function之后,就会调用mounted这个钩子,在mounted挂载完毕之后,这个实例就算是走完流程了
  • 有数据的变化,会调用beforeUpdate,然后经过Virtual DOM,最后updated更新完毕。当组件被销毁的时候,它会调用beforeDestory,以及destoryed。
文章来源:https://blog.csdn.net/m0_64715294/article/details/135247023
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。