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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

<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>