第五节：轻松掌握 vue 实例的生命周期

上两节我们都是讲vue的实例，简单创建和 定义实例的4个常用选项 ，没看过的伙伴可以先去看上两节，按顺序学习比较容易掌握。

这一节我们学习vue实例的生命周期，没错，实例也跟动物一样，有自己的“生命”，实例也会经历出生至死亡的各个阶段。

Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期，能帮助我们理解vue实例的运作机制，更好地合理利用各个钩子来完成我们的业务代码。

我们分别来看看这几个阶段：

1. beforeCreate

此阶段为实例初始化之后，此时的数据观察和事件配置都没好准备好。

我们试着console一下实例的数据data和挂载元素el，代码如下:

1. <div id="app">{{name}}</div>
   
2.   <script>
   
3.   let app = new Vue({
   
4.   el:"#app",
   
5.   data:{
   
6.     name:"前端君"
   
7.   },
   
8.   beforeCreate(){
   
9.     console.log('即将创建');
   
10.     console.log(this.$data);
    
11.     console.log(this.$el);
    
12.   }
    
13.     });
    
14. </script>

复制代码

得到的结果是：

1. 即将创建
   
2. undefined
   
3. undefined

复制代码

此时的实例的 data和 el还是undefined,不可用的。

2. created

beforeCreate之后紧接着的钩子就是创建完毕created，我们同样打印一下数据 data和挂载元素 el，看会得到什么？

在上一段代码的基础上，加上下面这段代码：

1. created(){
   
2.     console.log('创建完毕');
   
3.     console.log(this.$data);
   
4.     console.log(this.$el);
   
5. }

复制代码

我们看到打印的结果：

此时，我们能读取到数据data的值，但是DOM还没生成，所以属性el还不存在，输出 $data为一个Object对象，而 $el的值为undefined。

3. beforeMount

上一个阶段我们知道DOM还没生成，属性 el还为undefined，那么，此阶段为即将挂载，我们打印一下此时的$el是什么？

增加一下代码：

1. beforeMount(){
   
2.     console.log('即将挂载');
   
3.     console.log(this.$el);
   
4. }

复制代码

我们看到打印结果：

1. 即将挂载
   
2. <div id="app">{{name}}</div>

复制代码

此时的 $el不再是undefined，而是成功关联到我们指定的dom节点 <div id=”app”></div>，但此时 {{ name }}还没有被成功地渲染成我们data中的数据。没事，我们接着往下看。

4. mounted

mounted也就是挂载完毕阶段，到了这个阶段，数据就会被成功渲染出来，我们编写mounted的钩子，打印 $el 看看：

1. mounted(){
   
2.     console.log('挂载完毕');
   
3.     console.log(this.$el);
   
4. }

复制代码

打印结果：

1. 挂载完毕
   
2. <div id='"app">前端君</div>

复制代码

如我们所愿，此时打印属性 el，我们看到 {{ name }}已经成功渲染成我们 data.name的值：“前端君”。

5. beforeUpdate

我们知道，当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。

html片段代码我们加上ref属性，用于获取DOM元素（后期会讲到）。

1. <div ref="app" id="app">
   
2.   {{name}}
   
3. </div>

复制代码

Vue实例代码加上beforeUpdate钩子代码：

1. beforeUpdate(){
   
2.   console.log('=即将更新渲染=');
   
3.   let name = this.$refs.app.innerHTML;
   
4.   console.log('name:'+name);
   
5. },

复制代码

我们试一下，在控制台修改一下实例的数据name， 在更新渲染之前，我们打印视图中文本innerHTML的内容会是多少：

我们在控制台把app.name的值从原来的 “ 前端君” 修改成 “ web前端教程”,在更新视图之前beforeUpdate打印视图上的值，结果依然为原来的值：“ 前端君”，表明在此阶段， 视图并未重新渲染更新。

6. updated

此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码，如下：

1. updated(){
   
2.   console.log('==更新成功==');
   
3.   let name = this.$refs.app.innerHTML;
   
4.   console.log('name:'+name);
   
5. }

复制代码

结果如下：

大家注意两个不同阶段打印的name的值是不一样，updated阶段打印出来的name已经是最新的值：“ web前端教程”，说明此刻视图已经更新了。

7. beforeDestroy

调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。

8. destroyed

成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。

案例：我们通过在销毁前通过控制台修改实例的name，和销毁之后再次修改，看看情况。

1. beforeDestroy(){
   
2.   console.log('销毁之前');
   
3. },
   
4. destroyed(){
   
5.   console.log('销毁成功');
   
6. }

复制代码

效果如下图：

销毁之前，修改name的值，可以成功修改视图显示的内容为：“更新视图”，一旦效用实例的$destroy( )方法销毁之后，实例与视图的关系解绑，再修改name的值，已于事无补，视图再也不会更新了，说明实例成功被销毁了。

9. actived

keep-alive组件被激活的时候调用。

10. deactivated

keep-alive 组件停用时调用。

关于keep-alive组件的激活和停用，我们后面讲到具体案例再介绍，在这里你只需要知道vue提供了keep-alive组件激活和停用的钩子就可以了。

本节小结

掌握实例生命周期的8个阶段：

8.jpg (14.49 KB, 下载次数: 0)

下载附件

2017-4-12 14:35 上传

以后最为常用的钩子是：created 成功创建。