首页 > 其他 > 详细

VUE 生命周期函数

时间:2020-02-02 15:56:47      阅读:89      评论:0      收藏:0      [点我收藏+]

Vue实例的生命周期

new一个Vue实例  过程中 会执行各种各样的事件 事件有各自不同的作用

从Vue实例创建(new的过程),运行,销毁期间 伴随各种各样的事件 统称为实例生命周期事件

Vue实例在某一个时间点上自动执行的函数

 Vue实例创建阶段

  1. new Vue()
  2. Vue实例基础的初始化
  3. 自动调用第一个生命周期函数 beforeCreate()
    1. data数据没有初始化,值为undefined
    2. methods中的数据没有初始化
    3. 挂载点el为undefined
  4. init data和methods
  5. 自动调用第二个生命周期函数 create()
    1. data和methods都已经初始化好了(可以调用方法,和操作data中的数据了) 
    2. $el还没有
  6. 模版编译(只在内存中,没有放在页面中)vue代码中的指令执行,最终在内存中生生成一个编译好的最终模板字符串,渲染为内存中的虚拟dom,只是在内存中渲染好模板,并没有挂载到真正的页面中
  7. 自动调用第三个生命周期函数 beforeMounted() 
    1. 页面中的元素还没有被替换,还是之前写的模板字符串
  8. 内存中编译好的模板放到页面当中去
  9. 自动调用第四个生命周期函数 Mounted() //用户已经可以看到渲染好的页面,此时没有别的操作的化,这个实例就会躺在内存中一动不动 
  10. 当数据改变时还没渲染页面,会触发beforeUpdate和updated方法
  11. 在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在    

VUE 生命周期函数

原文:https://www.cnblogs.com/-constructor/p/12252359.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!