Vue生命周期

生命周期图

这是对于Vue生命周期,官网给的那张图的标注图,图片网上看到的,我觉得标注地很nice,建议一步步仔细看完图片,然后把图片自己悄悄保存下来,对照着图片的内容看第二部分的举例说明。

啥叫Vue生命周期?

每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如:从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。
我们称 这一系列的过程 就是Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会,利用各个钩子来完成我们的业务代码。

生命周期分解

对照着上图标注的内容,我们一个钩子一个钩子地举例说明。

beforeCreate

实例初始化之后、创建实例之前的执行的钩子事件。
如下例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
test: '天王盖地虎'
},
beforeCreate() {
console.log('beforeCreate钩子事件:');
console.log(this.$data);
console.log(this.$el);
}
})
</script>
</body>

得到的结果是:

小总结:创建实例之前,数据观察和事件配置都没好准备好。也就是数据也没有、DOM也没生成。

created

实例创建完成后执行的钩子
在上一段代码例子中,我们再来console一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
test: '天王盖地虎'
},
created() {
console.log('created钩子事件:');
console.log(this.$data);
console.log(this.$el);
}
})
</script>
</body>

得到的结果是:

小总结:实例创建完成后,我们能读取到数据data的值,但是DOM还没生成,挂载属性el还不存在。

beforeMount

将编译完成的html挂载到对应的虚拟DOM时触发的钩子
此时页面并没有内容。
即此阶段解读为: 即将挂载
我们打印下此时的$el

1
2
3
4
beforeMount() {
console.log('beforeMount钩子事件:');
console.log(this.$el);
}

得到的结果是:

小总结:此时的el不再是undefined,成功关联到我们指定的dom节点。但是此时的还没有成功渲染成data中的数据,页面没有内容。

PS:相关的render函数首次被调用。

mounted

编译好的html挂载到页面完成后所执行的事件钩子函数。
此时的阶段解读为: 挂载完毕阶段
我们再打印下此时$el看看:

1
2
3
4
mounted() {
console.log('mounted钩子事件:');
console.log(this.$el);
}

得到的结果是:

可见, 已经成功渲染成data里面test对应的值“天王盖地虎”了。

小总结:此时编译好的HTML已经挂载到了页面上,页面上已经渲染出了数据。一般会利用这个钩子函数做一些ajax请求获取数据进行数据初始化。

PS:mounted在整个实例中只执行一次。

beforeUpdate

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

updated

小总结:此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容。

PS:
1. 该钩子在服务器端渲染期间不被调用。
2. 应该避免在此期间更改状态,因为这可能会导致更新无限循环。

beforeDestroy

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

destroyed

小总结:成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

其实还有三个生命周期钩子没列出来:activateddeactivatederrorCaptured

坚持原创技术分享,您的支持将鼓励我继续创作!