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