Vue组件生命周期父子组件钩子函数的执行顺序

在Vue组件的生命周期中父组件的8个钩子和子组件的8个钩子的执行顺序是什么呢? 下面就给大家简述一下:

父组件代码:

beforeCreate() {
    // 1. 创建前
    console.log("beforeCreate --- 父组件实例初始化前")
  },
  created() {
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  父组件实例初始化后")
  },
  beforeMount() {
    // 3. 挂载前
    console.log("beforeMount --- 父组件vue的虚拟DOM, 挂载到真实的网页之前")
    },
  mounted() {
    // 4. 挂载后=> 操作dom
    console.log("mounted --- 父组件vue的虚拟DOM, 挂载到真实的网页上 ")
},
  beforeUpdate() {
    // 5. 更新前
    console.log("beforeUpdate --- 父组件数据更新, 页面更新前")
  },
  updated() {
    // 6. 更新后
    console.log("updated --- 父组件数据更新, 页面更新后")
  },
  beforeDestroy() {
    // 7. 销毁前
        console.log("beforeDestroy --- 父组件实例销毁之前调用")
  },
  destroyed() {
    // 8. 销毁后
    console.log("destroyed --- 父组件销毁完成")
  },

子组件代码:

beforeCreate() {
    // 1. 创建前
    console.log("beforeCreate --- 子组件实例初始化前")
  },
  created() {
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  子组件实例初始化后")
  },
  beforeMount() {
    // 3. 挂载前
    console.log("beforeMount --- 子组件vue的虚拟DOM, 挂载到真实的网页之前")
    },
  mounted() {
    // 4. 挂载后=> 操作dom
    console.log("mounted --- 子组件vue的虚拟DOM, 挂载到真实的网页上 ")
},
  beforeUpdate() {
    // 5. 更新前
    console.log("beforeUpdate --- 子组件数据更新, 页面更新前")
  },
  updated() {
    // 6. 更新后
    console.log("updated --- 子组件数据更新, 页面更新后")
  },
  beforeDestroy() {
    // 7. 销毁前
        console.log("beforeDestroy --- 子组件实例销毁之前调用")
  },
  destroyed() {
    // 8. 销毁后
    console.log("destroyed --- 子组件销毁完成")
  },

浏览器控制台打印结果如下:

beforeCreate --- 父组件实例初始化前
created ---  父组件实例初始化后
beforeMount --- 父组件vue的虚拟DOM, 挂载到真实的网页之前
beforeCreate --- 子组件实例初始化前 
created ---  子组件实例初始化后
beforeMount --- 子组件vue的虚拟DOM, 挂载到真实的网页之前
mounted --- 子组件vue的虚拟DOM, 挂载到真实的网页上 
mounted --- 父组件vue的虚拟DOM, 挂载到真实的网页上 
       //以下更新数据之后
beforeCreate --- 父组件实例初始化前
created ---  父组件实例初始化后
beforeMount --- 父组件vue的虚拟DOM, 挂载到真实的网页之前
beforeCreate --- 子组件实例初始化前
created ---  子组件实例初始化后
beforeMount --- 子组件vue的虚拟DOM, 挂载到真实的网页之前
beforeDestroy --- 父组件实例销毁之前调用
beforeDestroy --- 子组件实例销毁之前调用
destroyed --- 子组件销毁完成
destroyed --- 父组件销毁完成
mounted --- 子组件vue的虚拟DOM, 挂载到真实的网页上 
mounted --- 父组件vue的虚拟DOM, 挂载到真实的网页上 

通过控制台打印的数据我们可以清楚的看到: 前提:

在没更新数据之前的顺序:

父组件先执行直到挂载之前 beforeMount函数

紧接着就是子组件执行到挂载函数Mounted

最后父组件最后将dom挂载到网页上

在更新数据之后

执行钩子函数如下:

• 1. 父组件:beforeCreate --- 父组件实例初始化前
• 2. 父组件:created --- 父组件实例初始化后
• 3. 父组件:beforeMount --- 父组件vue的虚拟DOM, 挂载到真实的网页之前
• 4. 子组件:beforeCreate --- 子组件实例初始化前
• 5. 子组件:created --- 子组件实例初始化后
• 6. 子组件:beforeMount --- 子组件vue的虚拟DOM, 挂载到真实的网页之前
• 7. 父组件:beforeDestroy --- 父组件实例销毁之前调用
• 8. 子组件:beforeDestroy --- 子组件实例销毁之前调用
• 9. 子组件:destroyed --- 子组件销毁完成
• 10.父组件:destroyed --- 父组件销毁完成
• 11.子组件:mounted --- 子组件vue的虚拟DOM, 挂载到真实的网页上
• 12.父组件:mounted --- 父组件vue的虚拟DOM, 挂载到真实的网页上

小结

created : 父组件 初始化钩子函数 在 子组件初始化钩子函数之前执行

mounted : 父组件 挂载钩子函数 在 子组件挂载钩子函数之后执行

destroyed : 父组件 销毁完成钩子函数 在 子组件销毁完成钩子函数之后执行