VUE源碼解析心得
解讀vue源碼比較好奇的幾個點:
1.生命周期是如何實現的
2.如何時間數據監聽,實現雙向綁定的
=======================華麗的分割線========================================================
1. 官方圖解如https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示,beforeCreate -> 觀察數據變化 + 事件初始化 -> created -> el template是否存在如何出發 compiler -> beforeMount -> mounted -> 如何更新 ->當$destroy被調用時 beforeDestroy -> destroyed
initMixin: 定義_init方法,在創建實例的時候調用
stateMinxin: 定義Vue類 $data $props $set $delete等屬性
eventsMinxin: 定義Vue類的相關事件 $on $emit $off $once
lifecycleMinxin:定義Vue類生命周期相關的屬性
renderMixin: 定義Vue類_render屬性,用於創建VNode結點
.
_init方法:
initEvents: 初始化事件可添加_parentListeners熟悉感 進行自定義事件監聽
callHook beforeCreate:生命周期 (問題: 官網說是在beforeCreate進行的數據監聽和 initEvent ?)
initState: 數據監聽
callHook created:生命周期 ........(由此可看到vue生命周期是按照每個過程執行不同的內容)
2. 在initState方法中:
主要是利用的 Object.property方法
網上的一張原理圖很清晰的表明了整個過程
VUE源碼解析心得