vue的生命周期（钩子函数）

<template>
    <header v-on:click="changetitle">
        <h1>{{title1}}{{title}}</h1>
    </header>
</template>

<script>
export default {
 name: 'app-header',
  props:{
    title:{
      type:String,
      
    }
  },
 data(){
    return {
        title1: 'Vue.js Demo'
    }
 },
 components: {

 },
  methods:{
    changetitle:function () {
      //this.title='changed!'
      this.$emit('titlechanged','子向父组件传值')
    }
  },
  beforeCreate() {
    alert('组件实例化之前执行的函数！')
  },
  created() {
   alert('组件实例化完毕但是页面还未显示！')
  },
  beforeMount() {
   alert('组件挂载前，页面仍未展示，但是虚拟dom已经配置！')
  },
  mounted() {
   alert('组件挂载后，此方法执行后，页面显示！')
  },
  beforeUpdate() {
   alert('组件更新前,页面仍未更新，但是虚拟dom已经配置！')
  },
  updated() {
   alert('组件更新,此方法执行后，页面显示！')
  },
  beforeDestroy() {
   alert('组件销毁前！')
  },
  destroyed() {
   alert('组件销毁！')
  }


}
</script>

<style scoped>
header {
    background-color: lightgreen;
    padding: 10px;

}
h1 {
    color: #222 ;
    text-align: center;
}
</style>