resolveConstructorOptions
1 | if (options && options._isComponent) { |
获取Ctor中默认的options属性,components, directives, filters, _base(Vue)
1 | export function resolveConstructorOptions (Ctor: Class<Component>) { |
mergeOptions,首先调用resolveConstructorOptions,处理构造方法options
将Vue默认构造器的options,赋值给当前的options属性,并且判定super属性
mergeOptions
合并options,并且本地化(normalize) props,inject,directives
1 | normalizeProps(child, vm) |
合并属性,并且合并Field字段策略
1 | export function mergeOptions () { |
strats
strats中定义属性的不同调用方式。 Vue内部对不同的字段设定了不同的策略。比如对于data方法的策略:
1 | strats.data = function ( |
watch 的strats策略
1 | strats.watch = function ( |
对于data, props,以及watch都有不同的策略方案。
data方案调用 mergeDataOrFn 方法
1 | export function mergeDataOrFn ( |
1 | function mergeData (to: Object, from: ?Object): Object { |
initProxy
设置Prxoy,设置代理属性
initLifecycle
初始化生命周期属性
1 | export function initLifecycle (vm: Component) { |
initEvents
初始化events,此处会设置listener属性
1 | export function initEvents (vm: Component) { |
initRender
初始化_c和$createElement方法,_c方法主要用于内部调用,包括内部编译生成的代码会使用_c方法,而$createElemnt主要用于外部调用,供开发者调用,然后设置$attrs和$listeners
1 | export function initRender (vm: Component) { |
然后触发beforeCreate生命周期
initInjections
初始化inject
initState
初始化data,绑定watcher,并且初始化props,methods,data,以及computed属性,以及watch属性,如果存在data就调用initData,进行初始化,否则就observe一个空data
1 | export function initState (vm: Component) { |
initProps
将props属性纳入到响应式属性,并且将props属性代理到vm的_props属性中
1 | defineReactive(props, key, value, () => { |
initMethods
initMethods首先检测是否重名,然后设定bind,给methods方法绑定this
1 | vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm) |
initData
主要干了几件事
1 获取data对应的strats中的策略方法
2 根据策略获取对应的data
3 获取props以及methods,然后判定是否存在重复,然后data属性进行代理到vm的_data中
4 将data属性进行响应式
1 | function initData (vm: Component) { |
tips: Vue会将prop以及watch中的属性合并到data中 ? // 需要确定
initComputed
设置computed,并且为每个computed属性绑定一个watcher对象,然后对computed属性进行响应式,defineComputed中会利用缓存
1 | function initComputed (vm: Component, computed: Object) { |
initWatch
调用vm.$watch对watche属性进行监控,而在$watch 方法会在stateMixin初始化中进行赋值,具体就是会对传入的属性都创建一个Watcher对象进行监控,,并且还会对immediate属性进行判定。
1 | function initWatch (vm: Component, watch: Object) { |
initProvide
判定是否存在provide, 然后进行赋值
1 | export function initProvide (vm: Component) { |
vm.$mount
加载组件