Vue實(shí)例在什么周期中各階段屬性和觸發(fā)事件總結(jié)：
涉及到的生命周期鉤子(lifecycle hooks): beforeCreate,created,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed.
實(shí)例方法: vm.$mount,vm.$forceUpdate,vm.nextTick,vm.$destroy.
實(shí)例選項(xiàng):data,computed,methods,watch,props,propsData,el,template,render,renderError.
-
調(diào)用
new Vue()生成- 在初始化實(shí)例之后仇箱，在設(shè)置數(shù)據(jù)監(jiān)控狼电，事件／watch 之前，觸發(fā)
beforeCreate,在這個(gè)狀態(tài)输玷，實(shí)例的選項(xiàng)(options)沒有設(shè)置完成衙四，因此不能使用實(shí)例（組件）中的方法(methods)和數(shù)據(jù)(data)嗅回。主要作用成洗，預(yù)設(shè)實(shí)例需要的一些數(shù)據(jù)初始值等癞蚕。 - 完成實(shí)例的選項(xiàng)處理后壕吹，觸發(fā)
created,在這個(gè)狀態(tài)著蛙，$el<u>屬性仍然不可用</u>。
- 在初始化實(shí)例之后仇箱，在設(shè)置數(shù)據(jù)監(jiān)控狼电，事件／watch 之前，觸發(fā)
-
DOM節(jié)點(diǎn)掛載
掛載節(jié)點(diǎn)時(shí)機(jī)分兩種情況：
- 實(shí)例中有
el選項(xiàng)耳贬，在完成實(shí)例生成后開始掛載踏堡。 - 實(shí)例中沒有
el選項(xiàng)，在調(diào)用vm.$mount(el)時(shí)掛載咒劲。
開始掛載后顷蟆，選擇模版分兩種情況:
實(shí)例中有
template選項(xiàng)，編譯template中的內(nèi)容到render中腐魂。-
實(shí)例中沒有
template選項(xiàng)帐偎，則獲取el選線的outHTML屬性作為template。? 注釋：
el.outHTML與el.innerHTML的區(qū)別：outHTML包括el自身
完成模版編譯后蛔屹，觸發(fā)
beforeMount削樊，之后，創(chuàng)建DOM節(jié)點(diǎn)vm.$el并且替換el節(jié)點(diǎn)兔毒。然后出發(fā)mounted,Vue Dom節(jié)點(diǎn)掛載完成的漫贞。 - 實(shí)例中有
-
更新(update)，激活(activate)
更新數(shù)據(jù),在date 修改后育叁，觸發(fā)
beforeUpdate迅脐，重新編譯virtual DOM，并且顯示到頁面上豪嗽，然后觸發(fā)updated谴蔑。-
activated與deactivated只有
keep-live虛擬組件中的實(shí)例會(huì)觸發(fā)，即<keep-live> <component/> //激活時(shí)會(huì)觸發(fā)activated,無效時(shí)會(huì)觸發(fā)deactivated. </keep-live>keep-live作用:緩存標(biāo)簽內(nèi)的實(shí)例龟梦，控制實(shí)例顯示隱藏時(shí)隐锭，不需要再次生成實(shí)例，對(duì)需要頻繁切換的實(shí)例可以提高性能计贰。如果父組件不在
keep-live標(biāo)簽內(nèi),父組件隱藏時(shí)成榜，緩存會(huì)清除，會(huì)觸發(fā)deactivated
-
vm.$destroy()調(diào)用
vm.$destroy()方法后蹦玫，觸發(fā)beforeDestroy,然后斷開數(shù)據(jù)監(jiān)控赎婚，完成后觸發(fā)destroyed刘绣。注釋：調(diào)用
$destroy后，修改實(shí)例數(shù)據(jù)挣输，頁面顯示不會(huì)發(fā)生變化纬凤，但是實(shí)例中元素綁定的事件能正常執(zhí)行。? 如果父組件被銷毀撩嚼，子組件也會(huì)被銷毀停士，
keep-live緩存的實(shí)例會(huì)失效。? 使用
<component :is="view"/>標(biāo)簽時(shí)完丽，is屬性改變恋技，原有的實(shí)例會(huì)被銷毀。
附圖(來自Vue官網(wǎng))
*vue官方鏈接：http://vuejs.org/ *
