Vue生命週期函數詳解

生命週期圖

生命週期方法

var vm = new Vue({
     el: '#app',
      data: {
          msg:'ok'
      },
      methods: {
          show:function () {
              console.log("執行了show方法");
          },
          //調用鉤子函數destroy
          destroy(){
			 //經過this來調用，this表示全局對象
			 this.$destroy();
		 }
      },
      beforeCreate(){
          /*
              這是一個生命週期函數，表示在實例徹底建立出來以前會執行他
              在執行beforeCreate時，data和methods中的數據尚未初始化
          */
          console.log(this.msg);    //undefined
      },
      created(){
          /*
              第二個生命週期函數
              在created中，data和methods都已經初始化好
              若是要調用methods中的方法或者data中的數據，最先只能在created中操做
          */
          console.log(this.msg);   //ok
          this.show();   //執行了show方法
      },
      beforeMount(){
          /*
              這是第三個生命週期函數，
              此時模板已經在內存中編輯完成了，但還沒有把模板渲染到頁面中
              也就是在 beforeMount 執行的時候，頁面中的元素尚未真正替換過來，只是以前寫的模板字符串
          */
          console.log(document.getElementById("h3").innerText);   //{{ msg }}
      },
      mounted(){
          /*
              這是第四個生命週期函數，
              表示內存中的模板已經真實的掛載帶頁面中去了，用戶能夠看到渲染好的頁面
              注意：mounted是實例建立期間的最後一個生命週期函數，當執行完mounted後，表示實例別徹底建立好了
              若是要操做元素的DOM操做，最先在mounted中操做
          */
          console.log(document.getElementById("h3").innerText);   //ok
      },
      //接下來的是運行中的兩個事件
      beforeUpdate(){
          /*
              表示 咱們的界面尚未更新，可是數據已經更新了
              也就是執行beforeUpdate時，頁面中顯示的數據仍是舊的，此時，data中的數據已經更新了
          */
          console.log("頁面中的值：" + document.getElementById("h3").innerText);   //ok
          console.log("data中msg的值" + this.msg);   //No
      },
      updated(){
          /*
              執行時，頁面中的數據與data中的數據已經同步了
          */
          console.log("頁面中的值：" + document.getElementById("h3").innerText);   //No
          console.log("data中msg的值" + this.msg);   //No
      },
      beforeDestroy() {
          /*
              當執行該函數時，Vue實例已經從執行階段進入了銷燬階段，
              可是實例上全部的data和methods、過濾器、指令都還可用，此時尚未真正的銷燬
          */
          //注意：當時用了定時器時，須要咱們在該函數下手動的銷燬定時器，不然會形成內存泄漏
      },
      destroyed(){
          /*
              當執行了該函數時，組件已經徹底被銷燬，組件中全部的數據、方法、指令、過濾器都已經不可用了
          */
      }
  });