Vue实例的生命周期全过程（图）
（这里的红边圆角矩形内的都是对应的Vue实例的钩子函数）
在beforeCreate和created钩子函数间的生命周期
在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件
created钩子函数和beforeMount间的生命周期
对于created钩子函数和beforeMount间可能会让人感到有些迷惑，下面我就来解释一下：
el选项的有无对生命周期过程的影响
首先系统会判断对象中有没有el选项
有el选项，则继续编译过程
没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)
下面我展示一下：
new Vue({
el: '#app',
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
demo如下：
可以看到，在el选项填写且正确的时候，生命周期将正常进行
而当我们把el去掉：
new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
demo：
可以看到，生命周期的钩子函数执行到created就结束了
而当我们不加el选项，但是手动执行vm.$mount(el)方法的话，也能够使暂停的生命周期进行下去，例如：
var vm = new Vue({
beforeCreate: function () {
console.log('调用了beforeCreat钩子函数')
},
created: function () {
console.log('调用了created钩子函数')
},
beforeMount: function () {
console.log('调用了beforeMount钩子函数')
},
mounted: function () {
console.log('调用了mounted钩子函数')
}
})
vm.$mount('#app')
demo如下，可以看到，这个时候虽然对象中没有el参数，但通过$mount(el)动态添加的方式，也能够使生命周期顺利进行
