前言
前面我們簡單的了解了 vue 初始化時的一些大概的流程,這里我們詳細的了解下具體的內容;這塊建議搭建可以根據 demo 進行 debugger 來觀察;
內容
這一塊主要圍繞init.ts中的initLifecycle進行剖析,
initLifecycle
initLifecycle的方法位于scr/core/instance/lifecycle.ts中;
export function initLifecycle(vm: Component) {
// 合并后的options
const options = vm.$options
// locate first non-abstract parent
let parent = options.parent
// 存在父級并且不是抽象組件(如:keep-alive、transition)
if (parent && !options.abstract) {
// 找到不是抽象組件的實體
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent
}
// 將該實體推入父實體的$children陣列中
parent.$children.push(vm)
}
// https://v2.cn.vuejs.org/v2/api/#vm-parent
// 父實體
vm.$parent = parent
// https://v2.cn.vuejs.org/v2/api/#vm-root
// 如果當前實體沒有父實體那實體就是自己
vm.$root = parent ? parent.$root : vm
// https://v2.cn.vuejs.org/v2/api/#vm-children
// 當前實體的子組件,$children既不保證順序也不是回應式的;
vm.$children = []
// https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0
// 當 ref 和 v-for 一起使用的時候,你得到的 ref 將會是一個包含了對應資料源的這些子組件的陣列
// $refs 只會在組件渲染完成之后生效,并且它們不是回應式的,
// 避免在模板或計算屬性中訪問 $refs
vm.$refs = {}
// 如果父實體不存在那就賦予_provided空物件
vm._provided = parent ? parent._provided : Object.create(null)
// 初始化監聽屬性
vm._watcher = null
// 初始化active屬性
vm._inactive = null
// 標記指令狀態
vm._directInactive = false
// 標記mounted狀態
vm._isMounted = false
// 標記destroyed狀態
vm._isDestroyed = false
// 標記BeingDestroyed狀態
vm._isBeingDestroyed = false
}
?> 估計有朋友肯定發現了lifecycleMixin方法,這就是scr/core/instance/index.ts中生命周期混入的方法,不過這個我們不放在這里講,我們放到后面再說;
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/546877.html
標籤:其他
上一篇:股票問題-求收益最大值
下一篇:前端設計模式——命令模式
