vue父子组件的钩子函数执行先后顺序

父子组件的钩子函数执行先后顺序

• 父组件

export default {
  name: 'app',
  components: {
    Child
  },
  beforeCreate() {
      console.log('父组件组件beforeCreate')
  },
  created() {
      console.log('父组件created')
  },
  beforeMount() {
      console.log('父组件beforeMount')
  },
  mounted() {
      console.log('父组件mounted')
  },
  beforeDestroy() {
      console.log('父组件beforeDestroy')
  },
  destroyed() {
      console.log('父组件destroyed')
  },

}

• 子组件

export default {
  name: 'Child',
  props: {
    msg: String
  },

  beforeCreate() {
      console.log('子组件组件beforeCreate')
  },
  created() {
      console.log('子组件组件created')
  },
  beforeMount() {
      console.log('子组件组件beforeMount')
  },
  mounted() {
      console.log('子组件组件mounted')
  },
  beforeDestroy() {
      console.log('子组件组件beforeDestroy')
  },
  destroyed() {
      console.log('子组件组件destroyed')
  },
}

父组件执行beforeMount之后执行子组件的beforeCreate，因为父组件要将子组件的数据页渲染到父组件的页面上，需要先加载出子组件的数据，所以在执行父组件的mounted钩子函数之前，需要将子组件的钩子函数beforeCreate，created，beforeMounted，mounted执行完毕，这样数据都能渲染到页面上，不会出现白屏的现象。