?主要就记录下各个生命周期在干什么，加强记忆。
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。其中需要注意this.$el, this.$data，前者是DOM，后者是响应数据。结果如图：
?可以看到在created阶段中，已经可以获取到this.$data，在创建周期中，Vue里对props、data、computed等做了初始化。
beforeMount阶段中，this.$el中name:{{name}}, 因为此时页面上已存在的DOM元素作为 Vue 实例的挂载目标。如果此时创建的Vue实例没有指定el的情况下，在mounted阶段获取this.$el；
beforeCreate：
Vue实例化的时候，在Vue的源码instance中，有如下初始化顺序（生命周期、事件、渲染），所以此时beforeCreate中，el和data都为undefined。
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')created：
el还是undefined，而数据已经在initState与data中的属性进行绑定，在这里可以在渲染前更改数据但不会触发其他的钩子函数，一般可以在这里做初始数据的获取。需要注意此时的DOM并没有渲染，不要对DOM进行修改。
beforeMount：
从官网图上可一看出从created到beforeMount有两个判断：has el？has template？
首先判断Vue实例中是否有el选项，如果没有，则停止生命周期，直到mounted调用时继续执行。如果有el，则继续判断选项中是否有template，如果有，则把template作为参数传递给render函数。没有，则使用outerHTML进行编译。
所以此时的el为<div id="app"> name: {{name}} </div>。此时data里面的name值还没有更新到DOM上，可以在这个阶段对数据获取更改等。
mounted：
这个阶段把数据渲染到html，页面加载完成。此时可以按照需求向后台发送请求等。
beforeUpdate：
更新前状态，当view层数据变化之前，触发。
updated：
数据更新，重新渲染完成。
beforeDestroy：
销毁前，多用于清除定时器。
destroyed：
销毁后，多用于解除事件监听、清空数据。
当父子组件存在时，生命周期的执行顺序是：父组件beforeCreate => 父组件created => 父组件beforeMount =>子组件 child beforeCreate => 子组件 child created => 子组件 child beforeMount =>子组件 child Mounted =>父组件 mounted
销毁时顺序是：
?测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
name: {{name}}
<button @click="visible = !visible">显示/隐藏子组件</button>
<child v-if="visible"></child>
</div>
<script>
var vm = new Vue({
// beforeMount是否能获取$el
el: '#app',
components: {
'child': {
template: `<div>
age: {{age}}
</div>`,
data() {
return {
age: 18
}
},
beforeCreate() {
console.error("child beforeCreate");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
created() {
console.error("child created");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
beforeMount() {
console.error("child beforeMount");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
mounted() {
console.error("child mounted");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
beforeUpdate() {
console.error("child beforeUpdate");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
updated() {
console.error("child updated");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
beforeDestroy() {
console.error("child beforeDestroy");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
destroyed() {
console.error("child destroyed");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
}
},
},
data() {
return {
name: 'test',
visible: true
}
},
beforeCreate() {
console.error("beforeCreate");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
created() {
console.error("created");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
beforeMount() {
console.error("beforeMount");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
mounted() {
console.error("mounted");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
beforeUpdate() {
console.error("beforeUpdate");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
updated() {
console.error("updated");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
beforeDestroy() {
console.error("beforeDestroy");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
},
destroyed() {
console.error("destroyed");
console.group("this.$el", this.$el)
console.group("this.$data", this.$data)
}
})
</script>
</body>
</html>