天天看點

Vue2.0生命周期

beforeCreate: 

此時$data和$el都不存在

1.周遊data所有屬性,通過Object.defineProperty把這些屬性全部轉為getter/setter,并通過watcher(每個vue執行個體都會有一個)對屬性Observe記錄為依賴。

2. 初始化各種event。

created:

此時$data已經存在,$el還不存在

檢查是否有el選項,有的話檢查是否有template選項沒有的話等vm.$mout(el)後再去檢查是否有template選項 → 如果有template選項會去compile template并丢到render funtion裡,如果沒有template選項會去Compile el’s 的outerHTML做為template。

beforeMount:

此時$el已經存在了,但是UI上顯示的data屬性為virtual Dom的屬性

建立vm.$el并用它替換’el’選項。

mounted:

$data和$el已經挂載完成,監聽data change并rerender UI

beforeUpdate、updated:

Virtual Dom 重新渲染UI

beforeDestroy:

Teardown watchers,childcomponents and event listeners

destroyed:

Teardown done

Vue2.0生命周期

參考文章:

https://cn.vuejs.org/v2/guide/reactivity.html

https://segmentfault.com/a/1190000008010666

vue