Vue核心50讲 | 第三回：速看Vue世界的生命轮回

书接上文，上一回咱们初入 Vue 框架的世界，跟着编写了和 Vue 说的一句话 Say Hello。了解了 Vue 里面一个核心的内容声明式渲染。接下来，咱们快速地领略一下 Vue 的生命周期。

可能你会问了，啥叫生命周期啊？生命周期就是说生老病死。这刚和 Vue Say 个 Hello，咋就给整死了呢？可不是啊！这个生老病死说的是从出生到死亡的整个过程，咱们就快速地领略一下 Vue 从创建一个实例对象到被销毁的整个过程。

Vue 的生命周期图示

闲话少叙，书归正传。本着一图胜千言的原则，先来给你看张图吧：

是不是一脸懵逼？你就说是不是吧？！别不承认了，我第一次看到这张图的时候，就是一脸懵逼的状态。看完这张图立马有种想要放弃的节奏~

你可能在想，既然你知道，为啥还要先给我看这张图？不想继续做朋友了是不？！你想多了，真想多了！为啥这么说呢？不信你去看看 Vue 官方给的学习文档去，在一上来讲 Vue 实例的时候，最后就是这张图。当时，我也是一脸懵逼啊！

说到这儿啊，其实是想跟客官你说，其实你看懂也好，看不懂也好，都不影响咱们接着往下说。

Vue 的生命周期钩子

在看上面的这张图的时候，不知道你有没有注意到在这张图中有三个比较特殊的标记：

1. 创建实例：这个阶段要初始化事件监听、设置数据监听，还要编译模板。
2. 挂载成功：将实例挂载到 DOM 结构上，并在数据变化的时候更新 DOM。
3. 被销毁了：把之前所做的一切都全部销毁，化为乌有。

然后呢，在不同阶段 Vue 还提供了一些钩子。啥？钩子？对的，就是钩子。这钩子是个啥？给你看一段介绍：

钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。

上面的这段话是百度百科给的关于钩子是啥的解释。不太好理解是吧？不过通过这段话，咱们倒是可以知道一点，就是钩子都是函数。什么样的函数呢？如果在 JavaScript 中的话，其实就是回调函数。指的就是啊，在某个特定条件下会被触发执行的函数。

再简单点来说，钩子函数有点像咱们每天手机里面设置的闹钟一样。当你设置一个闹钟的时候，你会发现一到那个时候这个闹钟就会自动响起来。

这时候你可能会问了，那 Vue 提供了多少这样的钩子函数呢？那可老多了，咱现在就不一一来说了。后面的章回咱再细细说来。

那么，现在咱就简单来看一个案例吧：

<div id="app">
    <span>{{ message }}</span>
</div>
<script src="scripts/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '前端课湛'
        },
        // 创建实例对象成功阶段 - 事件监听和数据观察
        created: function(){
            console.log("创建实例: " + this.message);// 前端课湛
        },
        // 挂载成功阶段 - $el和template可用
        mounted: function(){
            console.log("挂载成功: " + this.$el);// <div id="app"></div>
        }
    });
</script>
复制代码

上面这段示例代码，使用了创建实例的一个钩子函数 created() 和挂载成功的一个钩子函数 mounted() 。运行之后的效果是这样的：

说到这啊，咱们对 Vue 的世界就又进了一步了。是不是走得越近，发现越有趣了呢？！