当前位置:新闻资讯

Vue生命周期函数

日期:2021-01-18 13:55:34 作者:http://www.zhanmanet.com 浏览量:0


  下面解释图中对应的数字

 

  1.var  vm=new  Vue({})表示开始创建一个Vue实例对象

 

  2.刚刚初始化了一个空的Vue实例对象。此时,这个对象上只有一些默认的生命周期函数和默认事件,其他的没有创建

 

  3.当执行beforeCreate生命周期函数时,data和methods中的数据和方法尚未初始化

 

  4.初始化data和methods

 

  5.在created中,data和methods都已初始化。如果要在data中操作数据或在methods中调用方法,最早只能在created的中操作

 

  6.这个绿框中的内容表示Vue开始编辑模板,在Vue代码中执行那些指令,最后在内存中生成一个编译好的最终模板字符串对象,然后将这个字符串对象渲染为内存中的DOM。此时,内存中只呈现模板,模板不挂载在真实页面上。

 

  7.当执行beforeMount函数时,模板已经在内存中编译,但是还没有挂载到页面上。这时,页面还是旧的

 

  8.将内存中已编译的模板替换到浏览器页面中

 

  9.mounted是页面加载后执行的函数。如果想通过一些插件来操作页面上的DOM节点,最早是在mounted中进行。

 

  10.只要执行完mounted,就意味着整个Vue实例对象已经初始化完毕了。此时,组件已经离开创建阶段,进入运行阶段。

 

  11.蓝色方框是组件的运行阶段。运行阶段只有两个生命周期函数:beforeUpdate和updated。这两个事件会根据data数据的变化有选择地触发0到多次

 

  12.当执行beforeUpdate时,页面中显示的数据仍然是旧的。此时,data中的数据是最新的,且页面没有与最新的数据同步

 

  13.在这一步中,首先,根据data中的最新数据,在内存中重新渲染出一份最新的内存DOM树。当内存DOM树更新后,最新的内存DOM树将被重新呈现给真实页面。此时,就完成数据从data(Model层)->view(视图层)的更新

 

  14.updated执行时,页面和data数据已经同步,并且是最新的

 

  15.当执行beforeDestroy钩子函数时,Vue实例已经从运行阶段进入了销毁阶段。此时,组件中的所有data、methods、过滤器和指令都处于可用状态,销毁过程尚未真正执行。

 

       16.当destroyed函数被执行时,组件已经被完全销毁,组件中的所有data、methods、过滤器和指令都处于不可用状态。