这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
作者的其他平台：
| CSDN：blog.csdn.net/qq_4115394…
| 知乎：www.zhihu.com/people/1024…
| GitHub：github.com/JiangXia-10…
| 公众号：1024笔记
本文大概1120字，读完共需6分钟
什么是vue实例的生命周期？
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，被称为Vue实例的生命周期，而钩子函数就是在某个阶段给我们一个做某些处理的机会。
Vue.js的官网上有张图详细的讲解了Vue实例的完整生命周期，如下：
而生命周期函数 = 创建期间的生命周期函数 + 运行期间的生命周期函数 + 销毁期间的生命周期函数。Vue实例的生命周期函数主要可以分为三个部分：
创建期间、运行期间以及销毁期间的生命周期函数
Vue.js创建期间的生命周期函数如下：
beforeCreate：beforeCreate函数在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created：created函数表示vue实例已经在内存中创建完成，并且数据data 和方法methods 也已经创建完成，但是还没有开始编译模板； beforeMount：beforeMount函数表示此时已经完成了模板的编译，但是还没有挂载到页面中； mounted：mounted函数表示已经将编译好的模板，挂载到了页面指定的容器中显示；
运行期间的生命周期函数如下：
beforeUpdate：beforeUpdate函数表示状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点； updated：updated函数表示vue实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了；
销毁期间的生命周期函数：
beforeDestroy：beforeDestroy函数表示在vue实例销毁之前调用。这个时候，实例仍然完全可用；
destroyed：destroyed函数在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
下面通过一个实例详解三个部分的生命周期函数，具体的方法以及注释都写在代码中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="updated" @click="text='No'">
<h3 id="h3">{{ text }}</h3>
</div>
<script>
// 这里创建Vue实例，得到ViewModel对象
var vm = new Vue({
el: '#app',
data: {
text: 'Yes'
},
methods: {
print() {
console.log('执行了print方法')
}
},
//beforeCreate、created、beforeMount、mounted属于创建期间的生命周期函数
//beforeCreate是程序运行遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
//在 beforeCreate 生命周期函数执行的时候，data和methods 中的 数据都还没有没初始化
beforeCreate() {
console.log("beforeCreate期间text的值:"+this.text)
this.print()
},
// created是第二个生命周期函数
// 在created声明周期中，data和methods都已经被初始化好了！
// 这个时候可以调用methods中的方法，或者操作data中的数据，created是最早能对data和methods操作的生命周期
created() {
console.log("created期间text的值:"+this.text)
this.print()
},
// beforeMount是第3个生命周期函数，表示模板已经在内存中编译完成了，但是还没能模板渲染到页面中
// 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
beforeMount() {
console.log("beforeMount:"+document.getElementById('h3').innerText)
},
// mounted第4个生命周期函数，表示内存中的模板已经真实的挂载到了页面中用户已经可以看到渲染好的页面了
// mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，如果没有其它操作的话，实例就一直在内存中
mounted() {
console.log("beforeMount:"+document.getElementById('h3').innerText)
},
// beforeUpdate和updated是运行中的生命周期函数
// beforeUpdate表示页面还没有被更新但是数据已经被更新了
//当执行 beforeUpdate 的时候，因为页面还未能更新，所以页面中的显示的数据不是最新的数据，但是data数据是已经被更新了的，只是页面还没能和最新的数据保持同步
beforeUpdate() {
console.log('beforeUpdate期间:界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('beforeUpdate期间:data 中的 text 数据是：' + this.text)
},
// 当updated执行的时候，页面和data中的数据已经保持同步了，都是最新的
updated() {
console.log('updated期间界面上元素的内容：' + document.getElementById('h3').innerText)
console.log('updated期间data 中的 text 数据是：' + this.text)
}
//beforeDestroy和Destroyed是销毁期间的生命周期函数
//组件销毁时触发
beforeDestroy(){
}
//组件销毁时触发，对data的改变不会再触发周期函数,vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在。所以对于实时显示的通知型组件，在destroyed之前，需要手动
//removeChild()删除该节点；否则，由于DOM节点的存在会影响浏览器性能。
destroyed(){
}
});
</script>
</body>
</html>
其他推荐：
