vue的生命周期图解

vue的生命周期函数及过程的简述:

  • vue的生命周期函数,其实就是vm的生命周期;
  • 创建:beforeCreate、created
  • 挂载:beforeMount、mounted
  • 更新:beforeUpdate、updated   [ˌʌpˈdeɪtɪd] 
  • 销毁:beforeDestroy、destroyed

vue的生命周期就是vue实例从创建,挂载,更新,销毁的过程;

beforeCreate创建前,初始化的vue实例只有默认的事件和生命周期;

beforeCreate和created之间会挂载Data,methods绑定事件;

根据 el 挂载页面元素,如果没有设置 el ,可以调用vm.$mount(el)函数手动挂载;el 挂载结束后,根据编译templete / 或者outerHTML(el)作为模板渲染页面;

在beforeMount前虚拟DOM已经创建完成;之后在mounted前,将vm.$el替换掉页面元素el; mounted 之后将虚拟dom挂载到了真实页面(此时页面已经全部渲染完成);此时如果数据变化就会触发beforeUpdate和updated进行一些操作;

最后主动调用销毁函数或者组件自动销毁时beforeDestroy,手动撤销监听事件,计时器等;destroyed时仅存在Dom节点,其他所有东西已自动销毁。这就是我所理解的vue的一个完整的生命周期;   

 vue 的生命周期图解:

猜你喜欢

转载自blog.csdn.net/weixin_42220533/article/details/114097702