八种生命周期
Vue的生命周期一直都是Vue的重点，下面就是Vue的生命周期图示：
作为一名初学者，你可能还并不能完全理解该图，但不要着急，我会通过一个小例子，带你了解Vue的生命周期这一整个过程。
<body>
<div class="app">
<button @click="username='xw'">激活update</button>
{{username}}:{{list}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el: '.app',
data: {
username: "抗争的小青年"
},
beforeCreate() {
console.log(`beforecate:${this.username}`);
console.log(`beforecate:${this.$el}`);
},
created() {
this.list = "aaa"
console.log(`created: ${this.username}`);
console.log(`created: ${this.$el}`);
},
beforeMount() {
console.log(this.$el);
},
mounted() {
console.log(this.$el);
},
beforeUpdate() {
console.log(this.$el);
},
updated() {
console.log(this.$el);
}
})
你可能注意到在上面的例子中，我用到了8个钩子函数中的6个。另外两个会在另外一个例子中体现。
🌴beforeCreate
这是创建实例之前执行的钩子函数，此时你访问Vue实例中的属性时，输出undefined。
🌴created
这是实例创建完成的钩子函数，此时Vue实例中的状态已经可以访问，但页面还没有开始渲染。
在这个阶段，我使用
this.list = "aaa"，创建了一个list,但是请注意，它是无法响应式的，因为数据绑定是指定Vue实例创建之前就存在的状态。我们在created阶段添加的属性没有挂载拦截器，所以无法响应式。
🌴beforeMount
此时编译渲染el的模板，并转成HTML。但注意，此时数据还没有渲染，Vue一些语法还没有起作用。
🌴mounted
此时页面的基本DOM就渲染完成了。在一般的开发中，我们可以在此步发送Ajax请求，或者使用相关插件。但是请注意，这个事件只执行一次。
🌴beforeUpdate
当Vue的状态发生改变时，就会触发Update，这也就意味着我们之前在created阶段添加的list属性的修改不会触发Update。可重复执行
🌴updated
这是更新后的钩子事件。可重复执行
此时你尝试着修改list的值，你会发现不会触发此钩子函数
🌲beforeDestroy
销毁实例前，此时该组件相关的子组件，监听事件等还没有删除。
🌲destroyed
vue实例销毁后
生命周期图示
这里是我整理的生命周期图示，可供参考
总结
| 生命周期 | 描述 | 使用频率 |
|---|---|---|
| beforeCreate | 初始化事件，没有对事件进行处理 | 很少 |
| create | 完成了状态的初始化，注入响应式。可以初始化状态（但无法实现数据驱动，响应式），挂载属性到当前的实例上。 | - |
| beforeMount | 完成了Vue实例的创建，但并没有实例化DOM节点 | - |
| mounted | 实例化了DOM节点，拿到真实的DOM节点。发送ajax请求，使用插件(依赖DOM节点)，比如swiper。 | - |
| beforeUpdate | 状态更新前，获取旧的DOM节点（重复无限次） | - |
| updated | 状态更新后，获取新的DOM节点（重复无限次） | - |
| beforeDestroy | 销毁前 | - |
| destroyed | 销毁后，清除定时器 | - |
