Vue2.0源码阅读笔记--生命周期

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)
}

export function initMixin (Vue: Class<Component>) {
  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 第一步： 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 第二步：renderProxy */
    if (process.env.NODE_ENV !== ‘production‘) {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    // 第三步：vm的生命周期相关变量初始化
    initLifecycle(vm)
    // 第四步：vm的事件监听初始化
    initEvents(vm)
    // 第五步： render
    initRender(vm)
    callHook(vm, ‘beforeCreate‘)
    // 第六步：vm的状态初始化，prop/data/computed/method/watch都在这里完成初始化
    initState(vm)
    callHook(vm, ‘created‘)
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

 // merge options 第一步： options参数的处理
    if (options && options._isComponent) {
      // optimize internal component instantiation 优化内部组件实例
      // since dynamic options merging is pretty slow, and none of the 因为动态options融合比较慢，而内部组件options不需要特别处理
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  const opts = vm.$options = Object.create(vm.constructor.options)
  // doing this because it‘s faster than dynamic enumeration. 做这些是因为它比动态计数要快
  opts.parent = options.parent
  opts.propsData = options.propsData
  opts._parentVnode = options._parentVnode
  opts._parentListeners = options._parentListeners
  opts._renderChildren = options._renderChildren
  opts._componentTag = options._componentTag
  opts._parentElm = options._parentElm
  opts._refElm = options._refElm
  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )

export function resolveConstructorOptions (Ctor: Class<Component>) {
  let options = Ctor.options
  if (Ctor.super) { // 如果有父级
    const superOptions = Ctor.super.options // 获取父级的options
    const cachedSuperOptions = Ctor.superOptions // 获取父级缓存的options
    const extendOptions = Ctor.extendOptions // 获取自身的options
    if (superOptions !== cachedSuperOptions) { // 如果父级options有变化
      // 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
}

/**
 * Merge two option objects into a new one. 将两个参数融合成一个
 * Core utility used in both instantiation and inheritance. 核心公用的会被用于实例和继承中
 */
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== ‘production‘) {
    checkComponents(child)
  }
  // 统一props格式
  normalizeProps(child)
  // 统一directives的格式
  normalizeDirectives(child)
  const extendsFrom = child.extends
  // 如果存在child.extends
  if (extendsFrom) {
    parent = typeof extendsFrom === ‘function‘
      ? mergeOptions(parent, extendsFrom.options, vm)
      : mergeOptions(parent, extendsFrom, vm) // 递归调用该方法
  }
  if (child.mixins) {
    //如果存在child.mixins
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      let mixin = child.mixins[i]
      if (mixin.prototype instanceof Vue) {
        mixin = mixin.options
      }
      parent = mergeOptions(parent, mixin, vm)
    }
  }
  //针对不同的键值，采用不同的merge策略
  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
}

/**
 * Option overwriting strategies are functions that handle
 * how to merge a parent option value and a child option
 * value into the final value.
 */
const strats = config.optionMergeStrategies

/* istanbul ignore else 第二步：renderProxy */
    if (process.env.NODE_ENV !== ‘production‘) {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }

 initProxy = function initProxy (vm) {
    if (hasProxy) {
      // determine which proxy handler to use 确定用哪个proxy handler
      const options = vm.$options
      const handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler // getHandler和hasHandler在上面有定义
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      vm._renderProxy = vm
    }
  }

var target = {}, handler = {};
var proxy = new Proxy(target, handler);

 var target = {};
    var handler = {
      set: function (target, key, value, receiver) {
        throw new Error("请不要为这个对象设置属性。");
      }
    };
    var proxy = new Proxy(target, handler);

// 第三步：vm的生命周期相关变量初始化
    initLifecycle(vm)

export function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

// 第四步：vm的事件监听初始化
    initEvents(vm)

export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

export function updateComponentListeners (
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
  target = vm
  updateListeners(listeners, oldListeners || {}, add, remove, vm)
}

export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  vm: Component
) {
  let name, cur, old, event
  for (name in on) {
    cur = on[name]
    old = oldOn[name]
    event = normalizeEvent(name)
    if (!cur) {
      process.env.NODE_ENV !== ‘production‘ && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    } else if (!old) {
      // 新添加的listener
      if (!cur.invoker) {
        cur = on[name] = createEventHandle(cur)
      }
      add(event.name, cur.invoker, event.once, event.capture)
    } else if (cur !== old) {
      // 替换旧的事件监听
      old.fn = cur
      on[name] = old
    }
  }
  // 删除无用的listeners
  for (name in oldOn) {
    if (!on[name]) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name].invoker, event.capture)
    }
  }
}

// 第五步： render 
    initRender(vm)

export function initRender (vm: Component) {
  vm.$vnode = null // the placeholder node in parent tree 在父级树上的提示节点？
  vm._vnode = null // the root of the child tree 子级的根节点
  vm._staticTrees = null
  const parentVnode = vm.$options._parentVnode
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  // bind the createElement fn to this instance 绑定创建元素到这个实例
  // so that we get proper render context inside it. 以方便我们能获得正确的渲染内容
  // args order: tag, data, children, normalizationType, alwaysNormalize  参数提供： tag,data, children,normalizationType,alwaysNormalize
  // internal version is used by render functions compiled from templates 内部版本用来编译从templates来的函数？
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // 箭头函数，相当于function(a,b,c,d) { return createElement(vm, a, b, c, d, false) }
  // normalization is always applied for the public version, used in
  // user-written render functions.  统一化？
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
}

// wrapper function for providing a more flexible interface 封装方法用来提供一个可扩展性的接口
// without getting yelled at by flow 不是流程式
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode {
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  if (alwaysNormalize) normalizationType = ALWAYS_NORMALIZE
  return _createElement(context, tag, data, children, normalizationType)
}

export const createEmptyVNode = () => {
  const node = new VNode()
  node.text = ‘‘
  node.isComment = true
  return node
}

 // 第六步：vm的状态初始化，prop/data/computed/method/watch都在这里完成初始化
    initState(vm)

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch) initWatch(vm, opts.watch)
}

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        // 将自己添加到属性的依赖列表中去
        watcher.evaluate()
      }
      if (Dep.target) {
        // 将依赖watcher的依赖也收集到属性依赖列表中去
        watcher.depend()
      }
      return watcher.value
    }
  }
}