一、生命周期的含义
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期图示：
二、生命周期的过程
生命周期钩子的 this 上下文指向调用它的 Vue 实例。
注意：在生命周期函数中不要使用箭头函数
1、beforeCreate 创建之前(数据初始化之前)
beforeCreate生命周期函数，一般在开发中很少使用，除非要设置Vue实例的内容。
在beforeCreate的时候，Vue实例身上的数据还没有初始化完成。
在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
// 创建之前（数据初始化之前）
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定挂载的容器
el:'#app',
data:{
name:'张三',
age:20
},
// 创建之前（数据初始化之前）
beforeCreate(){
console.log('-----------beforeCreate---------')
// 这个生命周期函数，基本上不用，除非要设置Vue实例
this.__proto__.fn = function () {
alert('哈哈！')
}
// Vue实例，已经创建完成
console.log(this)
// Vue实例身上的数据还没有初始化完成
console.log(this.name+''+this.age);
},
})
</script>
2、created 数据初始化完成
（1）created 生命周期函数
在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。
created 生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里
// 创建完成（数据初始化完成）
created(){
console.log('-------------created----------');
// 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里
console.log(this);
console.log(this.name+''+this.age);
},
})
（2）el选项和template选项
el的使用：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用vm.mount() 手动开启编译。
template的使用：
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。如果 Vue 选项中包含渲染函数，该模板将被忽略。
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
</div>
通过vue实例的mount方法的好处是，可以自行选择挂载的时机
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定挂载的容器
el:'#app',
// 指定模板（如果有模板，vue会渲染整个模板;如果没有模板，vue会将el里面的所有内容当成模板使用）
// template:"<div><h2>{{name}}</h2><h2>{{age}}</h2></div>",
data:{
name:'张三',
age:20
},
// 创建完成（数据初始化完成）
created(){
console.log('-------------created----------');
// 这个生命周期函数，通常用于初始化Vue管理的数据，比如：发送Ajax请求一般会放在这里
console.log(this);
console.log(this.name+''+this.age);
},
})
setTimeout(() => {
// 通过vue实例的$mount方法，手动挂载容器
// 通过el选项指定挂载容器，当模板渲染成功后，会立刻挂载页面
// $mount方法的好处是，可以自行选择挂载的时机
vm.$mount('#app')
}, 1000);
</script>
3、beforeMount 挂载之前
模板已经成功渲染，但是还没有将内容挂载到页面中。
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
beforeMount() {
console.log('----------beforeMount----------');
//这个生命周期函数，基本用不上
console.log(this.$el);
//可以修改数据，但是内容没有挂载到页面，并且后续内容会被真正的数据替换掉。
document.querySelector('#name').innerHTML = '哈哈'
},
4、mounted 挂载完成
mounted 生命周期函数，通常用于对DOM的重新改动
模板已经渲染成功，并且已经将内容挂载到了页面中
mounted() {
console.log('------------mounted-----------')
// 这个生命周期，通常用于对DOM的重新改动
console.log(this.$el);
//可以修改数据，并且重新渲染到页面
document.querySelector('#name').innerHTML = '呵呵'
},
5、beforeUpdate 数据更新之前
数据已经改了，只是还没有重新挂载页面
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<button @click="name='李四'">修改姓名</button>
<button @click="age=35">修改年龄</button>
</div>
beforeUpdate() {
console.log('-------------beforeUpdate----------');
console.log(this.name+''+this.age);
console.log(this.$el);
},
6、updated 数据更新完成
数据已经改了，且已经挂载到页面
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watch 取而代之。
// 修改完成（数据已经改了，且已经挂载到页面）
updated() {
console.log('-------------updated----------');
console.log(this.name+''+this.age);
console.log(this.$el);
},
7、beforeDestroy 销毁之前
在beforeDestroy阶段，对数据做任何的修改，都不会重新渲染到页面。该阶段，实例仍然完全可用，我们通常会在这个生命周期函数中做一些收尾的工作。 比如：停掉开启的定时器，初始化一些数据等等。
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<!-- 点击按钮调用销毁Vue实例的方法 -->
<button @click="destroy">不过了</button>
</div>
beforeDestroy() {
console.log('-------------beforeDestroy----------');
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = "王五"
},
8、destroyed 销毁完成
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
destroyed 生命周期基本不用
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<!-- 点击按钮调用销毁Vue实例的方法 -->
<button @click="destroy">不过了</button>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
// 指定挂载的容器
el:'#app',
data:{
name:'张三',
age:20
},
//方法
methods: {
destroy(){
this.$destroy()
}
},
destroyed() {
console.log('-------------destroyed----------');
// 这个生命周期，基本不用
console.log(this);
this.name = "王五"
},
})
</script>
