Vue实例的生命周期
new一个Vue实例 过程中 会执行各种各样的事件 事件有各自不同的作用
从Vue实例创建(new的过程),运行,销毁期间 伴随各种各样的事件 统称为实例生命周期事件
Vue实例在某一个时间点上自动执行的函数
Vue实例创建阶段
- new Vue()
- Vue实例基础的初始化
- 自动调用第一个生命周期函数 beforeCreate()
- data数据没有初始化,值为undefined
- methods中的数据没有初始化
- 挂载点el为undefined
- init data和methods
- 自动调用第二个生命周期函数 create()
- data和methods都已经初始化好了(可以调用方法,和操作data中的数据了)
- $el还没有
- 模版编译(只在内存中,没有放在页面中)vue代码中的指令执行,最终在内存中生生成一个编译好的最终模板字符串,渲染为内存中的虚拟dom,只是在内存中渲染好模板,并没有挂载到真正的页面中
- 自动调用第三个生命周期函数 beforeMounted()
- 页面中的元素还没有被替换,还是之前写的模板字符串
- 内存中编译好的模板放到页面当中去
- 自动调用第四个生命周期函数 Mounted() //用户已经可以看到渲染好的页面,此时没有别的操作的化,这个实例就会躺在内存中一动不动
- 当数据改变时还没渲染页面,会触发beforeUpdate和updated方法
- 在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
VUE 生命周期函数
原文:https://www.cnblogs.com/-constructor/p/12252359.html