【vue】父子组件生命周期执行顺序以及销毁和更新

父子组件执行顺序：

父组件beforeCreate --> 父组件created --> 父组件beforeMount  --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount  -->  子组件 mounted  --> 父组件mounted

父组件代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  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 class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  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>

子组件销毁时的执行顺序：

父组件beforeCreate --> 父组件created --> 父组件beforeMount  --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount  -->  子组件 mounted  --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy--> 子组件destroyed --> 父组件updated

父组件代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld v-if='is' msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  name: 'app',
  data(){
	return {
		is:true
	}  
  },
  components: {
    HelloWorld
  },
  beforeCreate() {
  	console.log('父组件beforeCreate')
  },
  created() {
  	console.log('父组件created')
  },
  beforeMount() {
  	console.log('父组件beforeMount')
  },
  mounted() {
  	console.log('父组件mounted')
	setTimeout(()=>{
		this.is = false
	},3000)
  },
  beforeUpdate() {
  	console.log('父组件beforeUpdate')
  },
  updated() {
  	console.log('父组件updated')
  },
  beforeDestroy() {
  	console.log('父组件beforeDestroy')
  },
  destroyed() {
  	console.log('父组件destroyed')
  }
}
</script>