Vue生命周期钩子函数加载顺序

首先创建子组件

<template>
    <div>
      <span>我是子组件</span>
    </div>
</template>

<script>
export default {
  name: "Children",
  data() {
    return {
    
    }
  },
  beforeCreate() {
    console.log("子组件beforeCreate")
  },
  created() {
    console.log("子组件created")
  },
  beforeMount() {
    console.log("子组件beforeMount")
  },
  mounted() {
    console.log("子组件mounted")
  },
  beforeUpdate() {
    console.log("子组件beforeUpdate")
  },
  updated() {
    console.log("子组件updated")
  },
  beforeDestroy() {
    console.log("子组件beforeDestroy")
  },
  destroyed() {
    console.log("子组件destroyed")
  }
}
</script>

将子组件引入在父组件中使用

<template>
  <div>
    <children></children>
  </div>
</template>

<script>
  import children from "./Children"
export default {
  name: '',
  components: { children },
  data () {
    return {
    }
  },
  beforeCreate() {
    console.log("父组件beforeCreate")
  },
  created() {
    console.log("父组件created")
  },
  beforeMount() {
    console.log("父组件beforeMount")
  },
  mounted() {
    console.log("父组件mounted")
  },
  beforeUpdate() {
    console.log("父组件beforeUpdate")
  },
  updated() {
    console.log("父组件updated")
  },
  beforeDestroy() {
    console.log("父组件beforeDestroy")
  },
  destroyed() {
    console.log("父组件destroyed")
  },
  methods: {}
}
</script>

查看控制台钩子函数加载顺序