1. 前言
vue版本：2.6.11
vue倉庫：https://github.com/vuejs/vue
vue檔案：https://cn.vuejs.org/
2. 加載Vue
在我們呼叫new Vue()初始化之前，Vue自身做了如下操作：
1) stateMixin(Vue)
說明：在Vue.prototype設定$data、$props、$set、$delete、$watch成員，
2) eventsMixin(Vue)
說明：在Vue.prototype設定$on、$once、$off、$emit等相關事件成員，
3) lifecycleMixin(Vue)
說明：在Vue.prototype設定_update、$forceUpdate、$destroy成員，
4) renderMixin(Vue)
說明：在Vue.prototype設定$nextTick、_render成員，
5) initGlobalAPI(Vue)
說明：這里將執行2塊內容：
①在Vue注冊靜態成員util、set、delete、nextTick、config、use、mixin、extend、component、directive、filte等等，
②設定Vue的options，包含的成員如下：其目的是在new Vue()時進行合并操作，
3. new Vue()做了什么
示例
new Vue({
props: {
name: String
},
el: '#app',
data: {
showModal: false
}
})
當我們呼叫new Vue()創建一個Vue實體物件時，內部做了哪些步驟：
1) 創建$options
創建Vue實體物件的$options,并在$options成員下面附加額外內容：
①合并Vue.options(上面initGlobalAPI創建的)與實體物件內容，
②normalizeProps、normalizeInject、normalizeDirectives：因Vue不同版本而創建的差異化props、inject、directives，在此處進行統一格式規范，方便后續處理，
③合并和封裝其他成員，如propsData、el、data、watch、component、directive、filter以及生命周期，
2) initLifecycle(vm)
說明：初始化實體物件的生命周期狀態，如：_isMounted、_isDestroyed、_isBeingDestroyed，
3) initEvents(vm)
說明：創建實體物件的_events成員，包含父組件系結在當前組件的事件，
4) initRender(vm)
設定實體物件的以下成員：
①$slots和$scopedSlots：訪問作用域插槽，
②$createElement：字串模板的代替方案，允許發揮 JavaScript 最大的編程能力，
③$attrs：包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 系結，當一個組件沒有宣告任何 prop 時，這里會包含所有父作用域的系結 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內部組件，
④$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器，可以通過 v-on="$listeners" 傳入內部組件，在創建更高層次的組件時非常有用，
5) 觸發beforeCreate事件
6) initInjections(vm)
說明：初始化組件的inject；provide 和 inject 主要在開發高階插件/組件庫時使用，并不推薦用于普通應用程式代碼中，
這對選項需要一起使用，其目的為以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效，參考：https://cn.vuejs.org/v2/api/#provide-inject
7) initState(vm)
初始化組件內的props、methods、data(這里對每一個值創建了__ob__，指向一個Observer)、computed、watch，
①initProps：處理props，
②initMethods：處理methods，
③initData：處理data，
④initComputed：處理computed，
⑤initWatch：處理watch，
8) initProvide
說明：初始化組件的provide；具體可以看上面的inject，
9) 觸發created事件
10) mount(el)
若Vue初始化時含有el選項，將會進行“掛載“操作，
End Web開發之路系列文章 選單加載中...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/68399.html
標籤：JavaScript