vue生命周期,执行顺序
写一篇文章记录一下vue单文件的生命周期,以及各个api的先后执行顺序,方便以后理解和查阅;在vue的官方文档中,已经介绍了单文件中重要的api的生命周期,以及他们的执行先后顺序 链接,如下图所示vue生命周期官方图示详细执行顺序说明在开发中我们还会涉及到props、data、computed、methods、watch等api,这几个常用的api的执行顺序可以结合源码分析;以vue2...
·
写一篇文章记录一下vue单文件的生命周期,以及各个api的先后执行顺序,方便以后理解和查阅;
在vue的官方文档中,已经介绍了单文件中重要的api的生命周期,以及他们的执行先后顺序 链接,如下图所示
vue生命周期官方图示
详细执行顺序说明
在开发中我们还会涉及到props、data、computed、methods、watch等api,这几个常用的api的执行顺序可以结合源码分析;
以vue2.6为例,在vue/src/core/instance/init.js中有如下组件初始化时的执行代码
进入initState(vm)方法,如下如所示
可以知道,在initState方法中,初始化了props、methods、data、computed、watch这些API,且因为initState方法的执行顺序是在callHook(vm,‘beforeCreate’)之后,callHook(vm,‘created’)之前,所以执行顺序是介于beforeCreate与created之间;
需要注意的是,如在props、data、computed中定义的变量,在执行时是先把数据存在到内存当中,等到template模板渲染完成后,数据就会从内存写入到模板,取代模板中的模板字符串,完成赋值;
执行顺序总结
beforeCreate -> state(data、computed等) -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed
当数据变化后,虚拟DOM重新渲染页面前会触发beforeUpdate函数;
当虚拟DOM渲染页面,视图更新后,触发updated函数;
更多推荐
已为社区贡献1条内容
所有评论(0)