我们在学习 Servlet 的时候有说过 Servlet 的生命周期，其实 Vue 也是有生命周期的。伴随着生命周期，还有很多的钩子，钩子就是在某个阶段给你一个做某些处理的机会。
一、生命周期介绍
1. new Vue()
我们第一步是创建 Vue 实例，创建实例的同时，还会初始化事件 & 生命周期。
在这里我们会接触到第一个钩子：beforeCreate。
我们可以在这个钩子里面做一些页面拦截：当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。
除去拦截，还可以做自定义重定向。当路由还没有进去时我们判断是否正确进去，若不正确进去可以重定向到指定的页面。
2. 初始化注入 & 响应性
执行完成上面的 beforeCreate 钩子之后，就到了下一步，初始化注入 & 响应性，这个主要是加载组件（我们后面学 cli 的时候会说组件），还有就是响应（详细可以看：https://cn.vuejs.org/v2/guide/reactivity.html）
之后，注入完成会执行 created 钩子函数，我们可以在这个钩子上初始化一些数据，可以通过 ajax 进行调用一些请求拿到数据进行绑定。
3. 编译模板
Vue 会判断是否有模板的存在，如果有，就进行编译模板，然后进行模版和数据结合挂载，如果没有，直接编辑 el 所绑定的 innerHTML，接着进行模板和数据结合挂载。（模版和数据结合挂载页面没有渲染）
之后，就会执行 beforeMount 钩子函数。这个钩子函数可以更改一些数据。
4. 挂载
上面的模板和数据结合之后，我们接下来就是要将这个挂载到页面上了。
在页面挂载完成前，我们还有一个钩子函数，就是 mounted 钩子，而这个钩子在一个 Vue 实例里，只会被调用一次。
执行完 mounted 之后，我们的整个 Vue 就挂载完成了。
接着每当数据发生变化的时候，先执行 beforeUpdate 钩子，然后虚拟 DOM 从新渲染更新，更新之后，再执行 updated 钩子，以此往复。
5. 销毁
当我们这个 Vue 实例不用了之后，这个需要进行销毁，组件销毁我们需要调用 unmount() 方法，调用了之后，我们在调用 unmount() 之前还有一个钩子函数，beforeUnmount 钩子。
调用完 unmount() 函数后，还有一个钩子函数，就是 unmounted 。
也就是说我们调用的过程是：beforeUnmount 钩子执行后执行 unmount 方法，执行完成 unmount 方法之后，再执行 unmounted 钩子。
unmount 方法做的事情，就是执行组件自身的一些清理逻辑、递归销毁子组件，进而把组件下面所有的 DOM 也全部移除了。
因此，当我们执行的 beforeUnmount 的时候，还是可以访问组件内部的 DOM 的，如果你的代码逻辑依赖 DOM，那么就必须在 beforeUnmount 钩子函数中执行。
此外，Vue.js 只能在 unmount 函数中做一些组件自身的内存清理，而对于用户的一些自定义操作所占用的内存，是不会清理的。
我们可以在 beforeUnmount 钩子中可以清除定时器、全局注册事件等。在 unmounted 钩子中除去可以额清除定时器，全局注册，还可以清理第三方库的一些调用。
具体怎么用，用在那里，是需要看有没有依赖 DOM。
二、生命周期钩子使用
我们自己写一个案例来感受一下生命周期钩子。
<body>
<div id="app">
<button @click="countNum += 1">点击 + 1</button>
<span>{{countNum}}</span>
<button @click="destroyVue()">销毁</button>
</div>
<script src="vuejs/vue2.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
countNum: 0
},
methods: {
destroyVue(){
vm.$destroy();
}
},
beforeCreate() {
console.log("beforeCreate 被调用");
console.log("beforeCreate 中获取 countNum " + this.countNum);
},
created() {
console.log("create 被调用");
console.log("create 中获取 countNum " + this.countNum);
},
beforeMount() {
console.log("beforeMount 被调用");
console.log("beforeMount 中获取 countNum " + this.countNum);
},
mounted() { // 调用一次
console.log("mounted 被调用");
console.log("mounted 中获取 countNum " + this.countNum);
},
beforeDestroy(){ // 调用一次
console.log("beforeUnmount 被调用");
console.log("beforeUnmount 中获取 countNum " + this.countNum);
},
destroyed(){
console.log("unmounted 被调用");
console.log("unmounted 中获取 countNum " + this.countNum);
},
beforeUpdate(){
console.log("beforeUpload 被调用");
console.log("beforeUpload 中获取 countNum " + this.countNum);
},
updated() {
console.log("updated 被调用");
console.log("updated 中获取 countNum " + this.countNum);
}
});
</script>
</body>运行图：
可以看到，在调用 beforeCreate 是最先被调用的生命周期钩子，这个钩子还没有办法获取 data 中的数据，而在后面 create 钩子被调用的时候，data 中的数据就被加载出来了。
然后我们点击 “点击 + 1” 这个按钮。点个两三次
可以看到，每点击一次的，我们就会触发 beforeUpdate 和 updated 钩子。
然后我们点击销毁。点击完销毁之后，我们再来点击 “点击 + 1” 按钮。
可以发现，再也没有办法 +1 了，这里是因为整个 Vue 实例已经被销毁了~~
这一篇东西不多，大家仔细理解一下~~
有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com
最近网站已经做好，并且已经上线，欢迎各位留言~~~
1532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
