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)
  }
}

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 一旦进入组件或者一旦进入页面，会执行哪些生命周期？

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