vue生命周期学习
vue实例从创建到销毁的过程就是生命周期,它总共分为8个阶段,分别是:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
下面是vue官网上的一张生命周期图,我们借助它来分析在不同时期都做了什么操作。
闲话少说,直接上代码,通过打印的log来分析各个钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="app">
<div id="my">{{msg}}</div>
<button @click="changeMsg">
Change the Message
</button>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '.app',
data: {
msg: 'Hello Vue'
},
beforeCreate:function(){
console.group('=====beforeCreate创建前状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
created:function(){
console.group('=====created创建完毕状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
beforeMount:function(){
console.group('=====beforeMount挂载前状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
mounted:function(){
console.group('=====mounted过载结束状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
beforeUpdate:function(){
console.group('=====beforeUpdate更新前状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
updated:function(){
console.group('=====updated更新完毕状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
beforeDestory:function(){
console.group('=====beforeDestory销毁前状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
destoryed:function(){
console.group('=====destoryed销毁完毕状态======');
console.log('el :',this.$el);
console.log('data :',this.$data);
console.log('msg :',this.msg);
},
methods: {
changeMsg() {
this.msg = "Hello world."
}
}
})
</script>
</html>
运行代码,打印结果如下图
由此可知,
1、第一次加载页面时触发了beforeCreate、created、beforeMount、mounted四个钩子函数。
2、在created的时候数据已经和data属性进行了绑定,但此时还没有el选项。
我们继续向下看created到beforeMount
这一阶段首先判断对象是否有el选项。如果有的话继续向下编译,如果没有则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el).
此时注释掉代码中
el:’#app’
然后运行可以看到created的时候就停止了
如果我们在后面加上
vm.$mount('.app');
就可以发现代码继续向下执行了。
beforeMount到mounted
此时给vue实例对象添加$el成员,并且替换掉挂载的dom元素。
mounted
beforeUpdate和updated
当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforUpdate和updated钩子函数。我们在console中输入:
vm.msg='触发组件更新'
在beforeUpdate,可以监听到data的变化但是view层没有被重新渲染,view层的数据没有变化。等到updated的时候 view层才被重新渲染,数据更新。
beforeDestory和destoryed
destoryed钩子函数在Vue实例销毁后调用。调用后vue实例的所有组件被销毁,事件监听器移除。