速看 Vue 世界的生命轮回
书接上文，上一回我们初入 Vue 框架的世界，跟着编写了和 Vue 说的一句话 Say Hello。了解了 Vue 里面一个核心的内容声明式渲染。接下来，我们快速地领略一下 Vue 的生命周期。vue
可能你会问了，啥叫生命周期啊？生命周期就是说生老病死。这刚和 Vue Say 个 Hello，咋就给整死了呢？可不是啊！这个生老病死说的是从出生到死亡的整个过程，我们就快速地领略一下 Vue 从建立一个实例对象到被销毁的整个过程。bash
Vue 的生命周期图示
闲话少叙，书归正传。本着一图胜千言的原则，先来给你看张图吧：app
是否是一脸懵逼？你就说是否是吧？！别不认可了，我第一次看到这张图的时候，就是一脸懵逼的状态。看完这张图立马有种想要放弃的节奏~框架
你可能在想，既然你知道，为啥还要先给我看这张图？不想继续作朋友了是不？！你想多了，真想多了！为啥这么说呢？不信你去看看 Vue 官方给的学习文档去，在一上来说 Vue 实例的时候，最后就是这张图。当时，我也是一脸懵逼啊！函数
说到这儿啊，实际上是想跟客官你说，其实你看懂也好，看不懂也好，都不影响我们接着往下说。post
Vue 的生命周期钩子
在看上面的这张图的时候，不知道你有没有注意到在这张图中有三个比较特殊的标记：学习
- 建立实例：这个阶段要初始化事件监听、设置数据监听，还要编译模板。
- 挂载成功：将实例挂载到 DOM 结构上，并在数据变化的时候更新 DOM。
- 被销毁了：把以前所作的一切都所有销毁，化为乌有。
而后呢，在不一样阶段 Vue 还提供了一些钩子。啥？钩子？对的，就是钩子。这钩子是个啥？给你看一段介绍：this
钩子函数是Windows消息处理机制的一部分，经过设置“钩子”，应用程序能够在系统级对全部消息、事件进行过滤，访问在正常状况下没法访问的消息。钩子的本质是一段用以处理系统消息的程序，经过系统调用，把它挂入系统。spa
上面的这段话是百度百科给的关于钩子是啥的解释。不太好理解是吧？不过经过这段话，我们却是能够知道一点，就是钩子都是函数。什么样的函数呢？若是在 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 的世界就又进了一步了。是否是走得越近，发现越有趣了呢？！