vue生命周期，执行顺序

写一篇文章记录一下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函数；