生命周期钩子函数 | 组件状态 | 常见用法 |
beforeCreate | this指向创建的实例,还不能访问data,computed,methods等 | 初始化非响应式变量 |
created | 可以访问data,methods:但是未挂载到DOM,并且还不能访问$el属性,$el属性内容此时为空数组 | 简单的ajax请求,页面的初始化 |
beforeMount | 在beforeMount之前,会找到对应的template,并编译成render函数 | - |
mounted | vue实例挂载到了DOM上,$ref.$el均可以访问 | 获取VNode信息,ajax请求 |
beforeUpdata | data发生变化,即DOM发生改变 | 适合在更新之前访问现有的DOM,如手动移除已添加的事件监听器 |
updated | 组件DOM已经更新,可执行依赖于DOM的操作 | 在这个钩子函数中操作数据,可能陷入死循环。尽量避免 |
beforeDestroy | 实例销毁之前调用。此时,实例依然可以使用,this可以获取到实例 | 常用与销毁定时器,解绑全局事件,销毁插件对象等 |
destroyed | 实例销毁后调用,调用后,vue实例数据解除绑定,事件监听器被移除,子实例都被销毁 | - |
1 new Vue()新建vue实例
2 初始化 事件&生命周期
(刚刚初始化一个空的Vue实例对象,此时,在这个对象上,只有一些默认的生命周期函数和默认的事件,其他的均未创建)
(1)beforeCreate 创建vue实例前的钩子函数
3 初始化 注入$校验
(初始化data和methods)
(2)created 实例创建完成之后的钩子函数
4 是否指定“el”选项 ?
4.1 是 否 当调用vm.$mount(el)函数时
4.12 是否指定 “template”选项?
5 是 否
编译模板:把data对象里的数据与vue语法写的模板编译成html
将template编译到render函数中 将el外部的HTML作为template编译
(3)beforeMount 开始挂载编译生成的HTML到对应位置时触发的钩子函数。但:此时还未将编译出的HTML渲染到页面上
6 创建vm.$el 并用其替换“el”
将编译好的HTML替换掉el属性所指向的dom对象或替换对应HTML标签里的内容
(4)mounted 将编译好的HTML挂载到页面完成后执行的钩子函数,此时可以发送ajax请求获取数据的操作进行数据初始化,但,mounted在整个实例声明内只执行一次
7 挂载完毕 虚拟DOM重新渲染并应用更新
(5)beforeUpdate 当data被修改时 实时监控data里面的数据变化,以便随时更新
(6)update updated执行时,页面和data数据已经保持同步,都是最新的 当data被修改时 实时监控data里面的数据变化,以便随时更新
当调用 vm.$destroy()函数时
(7)beforeDestroy Vue实例销毁之前执行的钩子函数 当执行beforeDestroy钩子函数时,vue实例就已经从运行阶段进入销毁阶段,此时,组件中所有data,methods,以及过滤器,指令等,都处于可用状态,此时还未真正执行销毁过程 vue实例销毁执行的钩子函数
8 解除绑定 销毁子组件以及事件监听器
(8)destroyed 当执行destroyed函数时,组件已经被完全销毁,此时组件中所有data,methods,以及过滤器,指令等,都已经不可用了
9 销毁完毕