当前位置:主页 > 新闻资讯 >

Vue生命周期函数

日期:2021-01-18 作者:栈码网络 来源:http://www.zhanmanet.com 浏览量:

  下面解释图中对应的数字
 
  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、过滤器和指令都处于不可用状态。