vue的8大生命周期
首先什么是vue的生命周期？
Vue 实例有一个完整的生命周期，也就是从开始创建、 初始化数据、 编译模板、 挂载 Dom、 渲染→更新→渲染、 销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期
来一张官方的生命周期图解镇贴（汉化版）：
vue的生命周期:
1.vue创建之前beforeCreated
2.创建created
3.挂载之前beforeMouted
4.挂载mouted
5.更新之前beforeUpdate
6.更新完成updated
7.销毁之前 beforeDestory
8.销毁完成destoryed
html结构：
<div id="app" ref="app">
<!-- ref 用于获取Dom属性 -->
{{name}}
</div>
javascript部分：
<script>
let vm = new Vue({//生命周期也是方法，不需要外在干预
el: "#app",
data: {
name: "VUE开发"
},
template:"<h1>this is h1 template</h1>",
beforeCreate() {//01创建之前(数据没有挂载，只是一个空壳，无法操作真实的DOM和访问数据)
console.log("将要创建")
console.log(this.$data);//数据 undefined
console.log(this.$el);//节点 undefined
},
created() {//02创建完毕，获得初始数据，无法渲染DOM[挂载]
console.log("创建完毕")
console.log(this.$data);//数据
console.log(this.$el);//节点 undefined
},
beforeMount() {//03即将挂载，可以访问到DOM也可以访问原始数据
console.log("即将挂载");
console.log(this.$el);
},
mounted() {//04挂载完毕,一个vue的基本操作（mustache渲染完成），有数据，有DOM
console.log("挂载完毕");
console.log(this.$el);
},
beforeUpdate() {//05更新之前
//控制台输入vm.$data.name = "新值"，后触发函数 beforeUpdate()
console.log("即将更新渲染");
let name = this.$refs.app.innerHTML;
console.log("name:" + name);
},
updated() {//06更新完成 data中的数据已经被更新后的值替换
console.log("更新渲染完成");
let name = this.$refs.app.innerHTML;
console.log("name:" + name);
},
//以下两个在控制台并不能被打印出来，执行完vm.$destroy()即可答打印
beforeDestroy () {//07销毁之前 一般在这里做一些善后工作，例如清除计时器等事件
console.log("销毁之前");
console.log(this.$data);//数据
console.log(this.$el);//节点
},
destroyed () {//08销毁完成 组件的数据绑定、监听...去掉后只剩下 dom 空壳
console.log("销毁完成");
console.log(this.$data);//数据
console.log(this.$el);//节点
}
});
console.log("创建完毕后vue实例外的打印输出" + vm.$data)
</script>
总结：
1.生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑
2.第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
