Vue2.0生命周期的示例分析

  
  
  



  {{message}}

用template/rander選項可以在控制臺清楚的看到：掛載完成后，el被新創建的vm.$el替換。

掛載前是以初始的el和虛擬DOM的形式存在的，此時以template中的內容為模板，模板內容不可見，打印p標簽為null；

掛載后，模板渲染的新DOM替換原來的el，原el所對應的DOM不存在，打印a標簽為null。

 beforeUpdate 和 updated

當data對象中數據更新時，會觸發 beforeUpdate鉤子，此時view層還沒有更新。 beforeUpdate有下面幾個需要注意的地方：

a、更新的數據必須在模板中直接或間接的使用，才會觸發beforeUpdate；

b、在掛載之前，data中數據更新不會觸發 beforeUpdate！即在created、beforeMount時改變數據不會觸發更新流程；

c、如果在beforeUpdate中，再次修改了該數據的值，會再次觸發beforeUpdate鉤子，進行兩次更新流程。

updated時，view層已更新完畢。

（在上面的代碼中增加兩個鉤子）

mounted: function () {
  this.message = 'first';
//   this.show = false;    // 由于模板中沒有用到show，所以show的改變不會觸發beforeUpdate
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前狀態===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
},
updated: function () {
  console.group('updated 更新完成狀態===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

這里需要注意一點：view層我們需要通過innerHTML獲取對應元素節點中的內容，而不能直接獲取元素節點。直接獲取元素節點，在控制臺打印出來的view層中的數據都是更新之后的狀態，不能打印出實時的正確的值，這應該和Chrome控制臺的輸出有關。

針對第三條，我們看一下下面的代碼演示：

mounted: function () {
  this.message = 'first';
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前狀態===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
  this.message = 'second';  // 此時在beforeUpdate中再次修改了message的值
},
updated: function () {
  console.group('updated 更新完成狀態===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

這里我們可以清楚的看到進行了兩次更新流程，但是對打印的結果有些疑問：第一次將message的值改為first，并且以first來渲染更新DOM，那么第一次調用updated時，message和DOM中的值都應該是first，而此時打印出來的時second。我理解的是，在第一次執行updated時，DOM就已經完成了第二次渲染更新，具體的過程還需要通過之后對源碼的學習去理解。這里各位有不同的理解或者更詳細的解釋，可以在評論區留言，共同學習。

在這里，我們可以在beforeUpdate中加定時器去修改message的值，就可以等待第一次數據改變，DOM更新渲染完成后，進行第二次數據改變。

beforeUpdate: function () {
  console.group('beforeUpdate 更新前狀態===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
  var that = this;
  setTimeout(function(){
  　　that.message = 'second';
  });
//  this.message = 'second';  // 此時在beforeUpdate中再次修改了message的值
},

這里可以清楚看到兩次數據改變時，數據和view層的更新狀態。

beforeDestroy 和 destroyed

beforeDestroy：實例在銷毀之前調用，此時實例仍然可用。

beforeDestroy -> destroyed： Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

destroyed：vue實例銷毀后調用。

以上是“Vue2.0生命周期的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！