在前面的话
Vue公司的实例进行一系列初始化步骤创建,如建立数据观察,编译模板,创建数据绑定,等等。在这个过程中,我们可以运行的业务逻辑通过一些定义的生命周期挂钩函数。本文将详细描述了Vue实例的生命周期
偶像
下面的图是在Vue实例的生命周期图
解释
其次,根据提供的生命周期挂钩,对每个阶段的细节Vue实例详细说明。
{ beforecreate }
当实例开始初始化时调用同步。此时,数据观察、事件等尚未初始化。
{创作}
在实例创建之后调用。此时,数据观察和事件方法已经完成,但DOM编译尚未启动,也就是说,它没有挂载到文档中。
{ beforemount }
运行前安装
{在}
在编译结束时调用,此时所有指令都已生效,数据更改可以触发DOM更新,但不能保证已将EL插入文档中。
{ BeforeUpdate }
在实例被安装之后,在再次更新实例(例如,更新数据)时调用该方法,此时DOM结构没有更新。
{更新}
在实例被安装之后,实例再次被更新,DOM结构被更新为调用。
{ beforedestroy }
实例在销毁实例的时刻仍然有效。
{破坏}
在实例被销毁后调用,此时所有绑定和实例指令都被解开,子实例被销毁。
{激活}
它需要与动态组件保持动态属性一起使用。在初始化动态组件的呈现过程中调用这个方法
{无效}
它需要与动态组件保持动态属性一起使用。在初始化动态组件迁移过程中调用此方法
简单的例子
这是一个简单的例子,Vue公司的实例中得到一个更清晰的认识的运行机制
{消息}
VaR VM =新的Vue({
EL:#实例,
数据:{
消息:'match
},
beforecreate(){
console.log('beforecreate);
},
创建(){
console.log('created);
},
beforemount(){
console.log('beforemount);
},
挂载(){
console.log('mounted);
},
BeforeUpdate(){
console.log('beforeupdate);
},
更新(){
console.log('updated);
调用$损坏的组件更新函数后,销毁
这个;
},
BeforeDestroy(){
console.log('beforedestroy);
},
销毁(){
console.log('destroyed);
},
})
以上是基于Vue实例的生命周期(综合分析),这是所有萧边分享你的内容。我希望能给你一个参考,我希望你会得到很多支持。