Vue實例在什么周期中各階段屬性和觸發(fā)事件總結(jié)：

涉及到的生命周期鉤子(lifecycle hooks): beforeCreate,created,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed.

實例方法: vm.$mount,vm.$forceUpdate,vm.nextTick,vm.$destroy.

實例選項:data,computed,methods,watch,props,propsData,el,template,render,renderError.

1. 調(diào)用new Vue()生成

   • 在初始化實例之后，在設(shè)置數(shù)據(jù)監(jiān)控，事件／watch 之前，觸發(fā)beforeCreate,在這個狀態(tài)，實例的選項(options)沒有設(shè)置完成，因此不能使用實例（組件）中的方法(methods)和數(shù)據(jù)(data)。主要作用，預(yù)設(shè)實例需要的一些數(shù)據(jù)初始值等。
   • 完成實例的選項處理后，觸發(fā)created,在這個狀態(tài)， $el<u>屬性仍然不可用</u>。

2. DOM節(jié)點掛載

   掛載節(jié)點時機分兩種情況：

   1. 實例中有el選項，在完成實例生成后開始掛載。
   2. 實例中沒有el選項，在調(diào)用vm.$mount(el)時掛載。

   開始掛載后，選擇模版分兩種情況:

   1. 實例中有template選項，編譯template中的內(nèi)容到render中。

   2. 實例中沒有template選項，則獲取el選線的outHTML屬性作為template。

      ? 注釋：el.outHTML與el.innerHTML的區(qū)別：outHTML包括el自身

   完成模版編譯后，觸發(fā)beforeMount，之后，創(chuàng)建DOM節(jié)點vm.$el并且替換el節(jié)點。然后出發(fā)mounted,Vue Dom節(jié)點掛載完成的。

3. 更新(update)，激活(activate)

   1. 更新數(shù)據(jù),在date 修改后，觸發(fā)beforeUpdate，重新編譯virtual DOM，并且顯示到頁面上，然后觸發(fā)updated。

   2. activated與deactivated

      只有keep-live虛擬組件中的實例會觸發(fā)，即

      <keep-live>
        <component/> //激活時會觸發(fā)activated,無效時會觸發(fā)deactivated.
      </keep-live>
      

      keep-live作用:緩存標簽內(nèi)的實例，控制實例顯示隱藏時，不需要再次生成實例，對需要頻繁切換的實例可以提高性能。

      如果父組件不在keep-live標簽內(nèi),父組件隱藏時，緩存會清除，會觸發(fā)deactivated

4. vm.$destroy()

   調(diào)用vm.$destroy()方法后，觸發(fā)beforeDestroy,然后斷開數(shù)據(jù)監(jiān)控，完成后觸發(fā)destroyed。

   注釋：調(diào)用$destroy后，修改實例數(shù)據(jù)，頁面顯示不會發(fā)生變化，但是實例中元素綁定的事件能正常執(zhí)行。

   ? 如果父組件被銷毀，子組件也會被銷毀，keep-live緩存的實例會失效。

   ? 使用<component :is="view"/>標簽時，is屬性改變，原有的實例會被銷毀。

附圖(來自Vue官網(wǎng))

*vue官方鏈接：http://vuejs.org/ *

lifecycle.png