第十四天2019-01-14

碎碎念

今天写了一天的适配移动端样式,发现还好,并不是原来想象中的那么难。早上公交上,也看了Vue的源码分析,渐入佳境吧,慢慢的也看的越来越没有障碍了。


Vue源码-笔记

Vue 构造函数

function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}

_init 方法

 Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
// a flag to avoid this being observed
vm._isVue = true
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options)
} else {
// 走这一步分析
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}

// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
initRender(vm)
}

Vue第一步

  • 使用策略对象合并参数选项
    export function resolveConstructorOptions (Ctor: Class<Component>) {
    let options = Ctor.options
    if (Ctor.super) {
    const superOptions = Ctor.super.options
    const cachedSuperOptions = Ctor.superOptions
    const extendOptions = Ctor.extendOptions
    if (superOptions !== cachedSuperOptions) {
    // super option changed
    Ctor.superOptions = superOptions
    extendOptions.render = options.render
    extendOptions.staticRenderFns = options.staticRenderFns
    extendOptions._scopeId = options._scopeId
    options = Ctor.options = mergeOptions(superOptions, extendOptions)
    if (options.name) {
    options.components[options.name] = Ctor
    }
    }
    }
    return options
    }

Vue.super 用来处理继承

mergeOptions

// 1、引用依赖
import Vue from '../instance/index'
其他引用...

// 2、合并父子选项值为最终值的策略对象,此时 strats 是一个空对象,因为 config.optionMergeStrategies = Object.create(null)
const strats = config.optionMergeStrategies
// 3、在 strats 对象上定义与参数选项名称相同的方法
strats.el =
strats.propsData = function (parent, child, vm, key){}
strats.data = function (parentVal, childVal, vm)

config._lifecycleHooks.forEach(hook => {
strats[hook] = mergeHook
})

config._assetTypes.forEach(function (type) {
strats[type + 's'] = mergeAssets
})

strats.watch = function (parentVal, childVal)

strats.props =
strats.methods =
strats.computed = function (parentVal: ?Object, childVal: ?Object)
// 默认的合并策略,如果有 `childVal` 则返回 `childVal` 没有则返回 `parentVal`
const defaultStrat = function (parentVal: any, childVal: any): any {
return childVal === undefined
? parentVal
: childVal
}

// 4、mergeOptions 中根据参数选项调用同名的策略方法进行合并处理
export function mergeOptions (
parent: Object,
child: Object,
vm?: Component
): Object {

// 其他代码
...

const options = {}
let key
for (key in parent) {
mergeField(key)
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key)
}
}
function mergeField (key) {
const strat = strats[key] || defaultStrat
options[key] = strat(parent[key], child[key], vm, key)
}
return options

}

内容比较丰富,信息量有点大,慢慢来吧,暂时先到这,下次得加快进度看。
–end

文章作者: lmislm
文章链接: http://lmislm.com/2019/01/14/2019-01-14/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog