🧑‍💻Vue生命周期

🔥1.1Vue生命周期都有哪些？

代码详情

class Vue{
	constructor( options ){
		options.beforeCreate.call(this)
		this.$data = options.data;
		
		options.created.call(this)
		options.beforeMount.call(this)

		this.$el = document.querySelector(options.el);
		options.mounted.call(this)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

new Vue({
  el:"#app",
  data : {
  	str:'123'
  },
  beforeCreate(){
  	console.log('beforeCreate',this.$el , this.$data)
  },
  created(){
  	console.log('created',this.$el , this.$data)
  },
  beforeMount(){
  	console.log('beforeMount',this.$el , this.$data)
  },
  mounted(){
  	console.log('mounted',this.$el , this.$data)
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

🔥1.2 一旦进入组件或者一旦进入页面，会执行哪些生命周期？

1. beforeCreate
2. created在这里插入代码片
3. beforeMount
4. mounted

🔥1.3 如果使用了keep-alive会多出来俩个生命周期

1. activated
2. deactivated

🔥1.4 如果使用了keep-alive第一次进入组件会执行5个生命周期

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. activated

🔥1.5 如果使用了keep-alive第二次或者第N次，每次都会执行一个生命周期

activated

🔥1.6 父子组件嵌套执行生命周期的顺序

🔥挂载阶段

1. 父 beforeCreate
2. 父 created
3. 父 beforeMount
   1. 子 beforeCreate
   2. 子 created
   3. 子 beforeMount
   4. 子 mounted
4. 父 mounted

🔥更新阶段

1. 父 beforeUpdate
   1. 子 eforeUpdate
   2. 子 updated
2. 父 updated

🔥销毁阶段

1. 父 beforeDestroy
   1. 子 beforeDestroy
   2. 子 destroyed
2. 父 destroyed