本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
1. Vue 生命周期的作用是什么？
2. 什么是 Vue 生命周期？
3. 第一次页面加载会触发哪几个钩子？
4. 简述每个周期具体适合哪些场景？
5. created 和 mounted 的区别？
6. Vue 获取数据在哪个周期函数？
7. $nextTick 的使用？
[编号：vue_07]
1 什么是 Vue 实例的生命周期函数
生命周期函数是 Vue 实例在某一个时间点会自动执行的函数。
2 Vue 有哪些生命周期函数
我们通过 Vue 官方提供的生命周期图来详细了解各个生命周期函数执行的节点，并写一份代码来对照测试。
❗️注意：Vue 实例的生命周期函数并不放在 methods 里，而是单独放在实例中！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端一万小时-Vue 实例的生命周期函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({ // 1️⃣创建名为 vm 的 Vue 实例；
el: '#app', /*
2️⃣vm 的挂载点在 #app 这个 DOM 上，
即让 Vue 实例接管 #app 这个 div 内的所有内容；
*/
template: '<div>{{test}}</div>', // ❗️数据为 test 并在模板渲染！
data: {
test: 'hello qdywxs'
},
beforeCreate() { // 3️⃣Vue 实例的基础初始化完成后自动执行；
console.log('beforeCreate')
},
created() { // 4️⃣Vue 的初始化基本都完成后自动执行；
console.log('created')
},
beforeMount() { // 5️⃣页面渲染之前执行，即此时页面上还没有渲染“hello qdywxs”这个内容；
console.log('beforeMount')
console.log(this.$el)
},
mounted() { // 6️⃣页面渲染完毕后执行，此时内容已经被渲染在页面上；
console.log('mounted')
console.log(this.$el)
},
beforeDestroy() { /*
7️⃣当 vm.$destroy() 被调用时执行（即我们销毁组件，
在组件即将被销毁时执行）；
*/
console.log('beforeDestroy')
},
destroyed() { // 8️⃣当组件被完全销毁后被执行；
console.log('destroyed')
},
beforeUpdate() { // 9️⃣数据发生改变，还未重新渲染之前执行；
console.log('beforeUpdate')
},
updated() { // 🔟数据发生改变，页面渲染后执行。
console.log('updated')
}
})
</script>
</body>
</html>
保存后我们打开页面的控制台，可以看见与生命周期图上描述一样， beforeCreate 、 created 、 beforeMount 、 mounted 四个生命周期函数会在各自对应的时间节点自动执行：
当在控制台调用 vm 实例的 destroy 方法后，先执行 beforeDestroy ，然后是 destroyed 被执行：
我们刷新页面后再更改 test 数据，先执行了 beforeUpdate ，然后执行 updated ：
以上，我们详细了解了 Vue 的八个生命周期函数。
其实 Vue 中还有另外三个生命周期函数，分别是 activated 、 deactivated 、 errorCaptured 。这三个函数我们将在之后的内容里了解到。
打开官网的 API 下的生命周期钩子可以查看所有生命周期函数的对应介绍。
但就如官网所说：
你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，生命周期图的参考价值会越来越高。
虽然可以不必马上搞清楚这些生命周期函数，但这八个已经了解到的函数及其执行时间节点请务必牢记于心。
祝好，qdywxs ♥ you！
