Vue入門基礎（生命週期鉤子函數）

Header.vue

<template >
    <div class="Header">
        <h1>{{title}}</h1>
    </div>
</template>

<script>
//js 邏輯部分
export default {
  name: 'Header',
  data() {
     return {
         title:"多組件嵌套demo"
    };
  },
  //生命週期函數
  beforeCreate(){
      alert("beforeCreate這時實例尚未被建立，全部你沒法知道data，也不能用watch監聽");
  },
  created(){
    alert("created這時實例已被建立，能夠獲得data，調用watch，可是頁面仍是空白的");  
  },
  beforeMount(){
   alert("beforeMount頁面掛載前，此時頁面依然是空白的。這時render函數首次被調用");  
  },
  mounted(){
   alert("mounted頁面掛載了，此時能夠看到頁面的內容。也能夠訪問到dom");  
  },
  beforeUpdate(){
      alert("beforeUpdate數據更新前,也就是虛擬DOM打補丁以前");  
  },
  updated(){
      alert("updated數據已經更新完畢");
  },
  beforeDestroy(){
      alert("beforeDestroy頁面離開以前被調用，清楚定時器或者第三方的dom結構");
  },
  destroyed(){
      alert("destroyed實例已被完成銷燬");
  }
}
</script>

<style scoped>
.Header{
     padding:10px;
     background-color: green
}
h1{
    color: black;
    text-align: center
}
</style>

 

 

結果