1. 程式人生 > >VUE源碼解析心得

VUE源碼解析心得

ins list 問題: .org order fec .... vuejs size

解讀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源碼解析心得