Vue生命周期

Vue生命周期就是Vue实例从创建到销毁的整个过程，分为八个阶段，有八个钩子。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

官方文档中给了一个图，嗯……看不明白，也不知道每个阶段到底都干了啥

lifecycle

看图不如直接上代码，我在每一个钩子函数中将el、data和data里的属性message都alert出来，不用console打印而用alert是因为这样可以看到页面什么时候被渲染出来。

//HelloWorld.vue

保存后浏览器打开localhost:8080。
首先是beforeCreated，此时el、data都是undefined，页面上还什么也没有。

beforeCreate.png

created时data已被初始化，但el还是undefined，页面还没有渲染出来

created.png

beforeMount.png

mounted时el初始化，页面渲染出

mounted.png

mounted.png

只要更改页面上的数据，就会触发beforeUpdate，把输入框里的hello改为hell，可以看到此时的alert出message已经改变，但页面上还没有变，在updated时页面数据更新

beforeUpdate.png

updated.png

updated.png

从上边的结果来看created和beforeMounted都是data已初始化，el还未初始化，但是我在网上看其他人的结果却不一样，在其他文章看到说“beforeMount就完成了 el 和 data 初始化 ，此时el还是 {{message}}，应用了 Virtual DOM（虚拟Dom）技术，先把坑占住了，到后面mounted挂载的时候再把值渲染进去”，下边是他人打印的结果。

参考文章：https://segmentfault.com/a/1190000008010666

为什么我打印的没有虚拟DOM？这先作为一个遗留问题。