Vue生命周期中的八个钩子函数相机
1、beforecreate和created函数
beforecreate和created以初始化:数据监测、数据代理为分界线。
在执行beforecreate()之前,将初始化生命周期、时间,但数据代理还没有开始。
(1)beforecreate():
在初始化数据监测、数据代理之前执行beforecreate函数中的内容。此时,无法通过vm访问到data中的数据、methods中的方法
(2)created():
在初始化数据监测、数据代理之后执行beforecreate函数中的内容。此时可以通过vm访问到data中的数据、methods中配置的方法
在数据挂载之前还有一个步骤,那就是vue解析模板的过程(生成虚拟dom),页面还不能显示解析好的内容。
2、beforemount和mounted函数
(3)beforemount():
在vue完成虚拟dom的生成之后,在将虚拟dom转换为真实dom之前执行。此时,页面呈现的是未经vue编译的dom结构,所有对dom的操作,最终都不奏效。
(4)mounted():
在将虚拟dom转换为真实dom之后执行。此时,页面中呈现的是经过vue编译的dom,对dom的操作均有效(尽可能避免)。至此初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
3、beforeupdate和updated函数
(5)beforeupdate():
在数据发生变化时,生成新的虚拟dom,随后与旧的虚拟dom进行比较,最终完成页面更新(model-》view)的过程之前执行。此时,数据是新的,但页面是旧的,即,页面尚未和数据保持同步
(6)updated():
在数据发生变化时,生成新的虚拟dom,随后与旧的虚拟dom进行比较,最终完成页面更新(model-》view)的过程之后执行。此时,数据是新的,页面也是新的,即,页面和数据保持同步
4、beforedestroy和destroyed函数
(7)beforedestroy():
在移除数据监视、子级元素、事件监听之前执行。此时,vm中所有的data、methods、指令等都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。此时所有东西都可访问到,但是执行操作,页面上的内容不会发生改变
(8)destroyed():
在移除数据监视、子级元素、事件监听之后执行。解除与页面上data、methods、指令等的绑定。
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!