Vue之生命周期函数

<template>
  <div id="root">
    <!-- <div ref="title">{{title}}</div> -->
    <v-about v-if="flag"></v-about>
    <button class="button" @click="flag = !flag">组件是否被销毁</button>
  </div>
</template>

<script>
import About from "./views/About.vue"
export default {
  components:{
    'v-about' : About
  },
  data(){
    return{
      title:"hello world!",
      flag:true
    }
  },
  beforeCreate(){
    //没有对title进行初始化 undefined
    console.log("beforeCreate:"+this.title)
  },
  created(){
    //对title进行初始化 hello world!
    console.log("created:"+this.title)
  },
  beforeMount(){
    //模板未渲染 DOM元素未就绪 undefined
    console.log("beforeMount:"+this.$refs.title)
  },
  mounted(){
    //模板已渲染， DOM元素已就绪 mounted:[object HTMLDivElement]
    console.log("mounted:"+this.$refs.title)
  },
   beforeDestroy(){
    console.log("beforeDestroy:实例被销毁之前")
  },
  destroyed(){
    console.log("destroyed:实例被销毁之后")
  },
  methods:{
    
  }
}
</script>