vue生命周期

188 阅读2分钟

beforeCreate

  • beforeCreate 表示实例被完全创建出来之前,会执行它

注意:在beforeCreate 生命周期被执行的时候,datamethods 中的数据都还没有初始化。

  • created 中,datamethods 都已经被初始化了

注意,如果需要操作datamethods 中的数据,最早是在created 的生命周期中执行。

vue生命周期

这里表示vue开始编译模板,把vue代码中的指令进行编译,在内存中生成一个编译好的内存字符串,渲染为内存中的DOM,此时,只是在内存中,渲染好了模板,并没有把模板挂载到页面中去;

beforeMount

  • beforeMount 表示模板已经在内存中编译完成,但是尚未把模板渲染到页面中去。

beforeMount 执行的时候,页面中元素,还没有被真正替换过来,只是之前写的一些模板字符串

mounted

  • mounted 表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。如果要通过有些页面插件操作DOM,最早在mounted中执行。

注意:mounted 是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示,实例已经被完全创建好了。此时,如果没有其他操作的话,这个实例,就静静地躺在我们的内存中,一动不动。

只要执行完了mounted,就表示整个vue实例已经初始化完毕,此时,组件已经完全脱离了创建阶段,进入到了运行阶段。

组件阶段运行的函数只有两个:

  • mounted
  • beforeUpdate

beforeUpdate

  • beforeUpdate 这时候,我们的界面还没有被更新,[数据被更新了?数据肯定被更新了]

得出结论,当执行beforeUpdate 的时候,页面中显示的数据还是旧的,此时data数据是最新的,页面尚未和最新的数据进行同步。

这一步执行的是,先根据data 最新的数据,在内存中,重新渲染出一份最新的内存DOM 树,当最新的内存DOM树,被更新之后,会把最新的内存DOM树,重新渲染到真实的页面中去,这时候,就完成了data(model)层到view (视图层)的更新。

updated

  • updated 事件执行的时候,页面data和数据已经保持同步了,都是最新的。

beforeDestory

  • 当执行beforeDestory 钩子函数的时候,vue实例已经从运行阶段,进入到销毁阶段
  • 当执行beforeDestory 的时候,实例身上所有的datamethods ,以及过滤器组件等等,组件都处于可用状态,此时,还没有真正执行销毁的过程。

destory

当执行到destory函数的时候,组件已经被完全销毁了,此时,组件中,所有的数据,方法,指令,过滤器,都已经不可用了。