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

  
  
  



  {{message}}

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

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

掛載后，模板渲染的新DOM替換原來的el，原el所對應(yīng)的DOM不存在，打印a標(biāo)簽為null。

 beforeUpdate 和 updated

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

a、更新的數(shù)據(jù)必須在模板中直接或間接的使用，才會觸發(fā)beforeUpdate；

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

c、如果在beforeUpdate中，再次修改了該數(shù)據(jù)的值，會再次觸發(fā)beforeUpdate鉤子，進(jìn)行兩次更新流程。

updated時，view層已更新完畢。

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

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

這里需要注意一點(diǎn)：view層我們需要通過innerHTML獲取對應(yīng)元素節(jié)點(diǎn)中的內(nèi)容，而不能直接獲取元素節(jié)點(diǎn)。直接獲取元素節(jié)點(diǎn)，在控制臺打印出來的view層中的數(shù)據(jù)都是更新之后的狀態(tài)，不能打印出實(shí)時的正確的值，這應(yīng)該和Chrome控制臺的輸出有關(guān)。

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

mounted: function () {
  this.message = 'first';
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前狀態(tài)===============》');
  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 更新完成狀態(tài)===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

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

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

beforeUpdate: function () {
  console.group('beforeUpdate 更新前狀態(tài)===============》');
  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的值
},

這里可以清楚看到兩次數(shù)據(jù)改變時，數(shù)據(jù)和view層的更新狀態(tài)。

beforeDestroy 和 destroyed

beforeDestroy：實(shí)例在銷毀之前調(diào)用，此時實(shí)例仍然可用。

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

destroyed：vue實(shí)例銷毀后調(diào)用。

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