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

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

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

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

1. beforeCreate

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="app">{{name}}</div>
<script>
let app = new Vue({
el:"#app",
data:{
name:"前端君"
},
beforeCreate(){
console.log('即将创建');
console.log(this.$data);
console.log(this.$el);
}
});
</script>

得到的结果是:

此时的实例中的datael还是undefined,不可用的。

2. created

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

在上一段代码的基础上,加上下面这段代码:

1
2
3
4
5
6

created(){
console.log('创建完毕');
console.log(this.$data);
console.log(this.$el);
}

我们看到打印的结果:

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

3. beforeMount

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

增加一下代码:

1
2
3
4
5

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

我们看到打印结果:

此时的$el不再是undefined,而是成功关联到我们指定的dom节点

,但此时{{ name }}还没有被成功地渲染成我们data中的数据。没事,我们接着往下看。

4. mounted

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

1
2
3
4
5

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

打印结果:

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

5. beforeUpdate

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

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

1
2
3
4

<div ref="app" id="app">
{{name}}
</div>

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

1
2
3
4
5
6

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

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

(gif图,加载需要点时间)

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

6. updated

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

1
2
3
4
5
6

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

结果如下:

(gif图,多看2遍,注意视图变化)

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

7. beforeDestroy

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

8. destroyed

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

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

1
2
3
4
5
6
7

beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁成功');
}

效果如下图: