1.在init阶段inject 是比 provide更早,比initState(initProps、initMethods、initComputed、initWatch) 都要早,因为vue的组件层级创建父组件created后再去创建子组件,一层一层向下创建的模式,那么inject如果有在上级组件定义provide,那么都会拿得到,而methods、computed、watch也有可能会用到 inject的值,所以需要放在最先初始化。
2.initInjections 原理
export function resolveInject (inject: any, vm: Component): ?Object {
if (inject) {
// inject is :any because flow is not smart enough to figure out cached
const result = Object.create(null)
const keys = hasSymbol
? Reflect.ownKeys(inject)
: Object.keys(inject)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
// #6574 in case the inject object is observed...
if (key === '__ob__') continue
const provideKey = inject[key].from
let source = vm
//**********************************主要在这段**********************************
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) {
result[key] = source._provided[provideKey]
break
}
source = source.$parent
}
if (!source) {
if ('default' in inject[key]) {
const provideDefault = inject[key].default
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault
} else if (process.env.NODE_ENV !== 'production') {
warn(`Injection "${key}" not found`, vm)
}
}
}
return result
}
}
3.beforeCreate生命周期为什么不能访问数据,能访问到什么
//初始化关系属性$parent $children vm.$root
initLifecycle(vm)
//初始化自定义事件 this.$emit('aaa') this.$on('aaa',handleFunc)
initEvents(vm)
// vm.$slots vm.$scopedSlots vm._c vm.$createElement初始化插槽
initRender(vm)
//执行beforeCreate生命周期函数(beforeCreate不能访问数据,)
callHook(vm, 'beforeCreate')
4.initEvents 事件是挂在父组件执行还是当前组件this.$emit的组件
//初始化自定义事件 所以最终还是在当前组件 this.$emit('aaa') this.$on('aaa',handleFunc) ,
initEvents(vm)
5.有el选项为什么可以不需要$mount
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
网友评论