webpack
      |---build               webpack build 的 各个配置文件
      |---config              不同环境的基础配置
      |---dist                npm run build 生成的output文件
      |---node_modules        引用的npm生态圈的模块
      |---src                 项目的根目录
          |---api             放置各个服务端接口
            |---index.js      index接口
          |---components      模块内部的组件 也就是页面级的组件
            |---header        header组件
              |---header.vue
              |---imgs
                |--head.jpg
          |---store           vuex的store数据模块 各模块划分请参考vuex使用文档
            |---actions.js
            |---getters.js
            |---index.js
            |---mutation-types.js
            |---mutation.js
            |---state.js
          |---App.vue         模块的主vue 包含模板 逻辑 样式
          |---main.html       模块的入口html
          |---main.js         模块的入口js
      |---static              图片等静态资源
      |---.babelrc            babel语法的配置文件
      |---.editorconfig       编辑器的配置文件 -> 规范接入的同学
      |---.eslintignore       配置eslint语法检测忽略的文件
      |---.eslintrc.js        eslint语法检测的配置文件
      |---.gitignore          git提交忽略的文件
      |---package.json        依赖包配置

// src/core/instance/lifecycle.js

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
    // ...
  }
  // 1-2-3-6-2-2 触发 beforeMount 事件
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      // ...
      vm._update(vnode, hydrating)

    }
  } else {
    // _render 在 ./render.js中定义
    updateComponent = () => {
      // 1-2-3-6-2-5
      vm._update(vm._render(), hydrating)
    }
  }
  // new一个watcher对象 会运行传入的方法vm._update(vm._render(), hydrating)
  vm._watcher = new Watcher(vm, updateComponent, noop)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

// src/core/instance/render.js

// 1-2-3-6-2-3-1  1-4-3 : VNode限定返回值为VNode对象
Vue.prototype._render = function (): VNode {
  const vm: Component = this
  const {
    render,
    staticRenderFns,
    _parentVnode
  } = vm.$options

  // ...
  vm.$vnode = _parentVnode
  // render self
  let vnode
  try {
    vnode = render.call(vm._renderProxy, vm.$createElement)
  } catch (e) {
    handleError(e, vm, `render function`)
    // ...

  }
  // ...
  // set parent
  vnode.parent = _parentVnode
  // 1-2-3-6-2-3-2 1-4-4
  return vnode
}

// src/core/vdom/create-element.js

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 function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode {
  if (data && data.__ob__) {
    return createEmptyVNode()
  }
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // support single function children as default scoped slot
  if (Array.isArray(children) &&
      typeof children[0] === 'function') {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  if (vnode) {
    if (ns) applyNS(vnode, ns)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

// src/core/instance/lifecycle.js

// 1-2-3-6-2-6 vm._update原型方法 通过vm._render()拿到vNode后，进行DOM更新。
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  if (vm._isMounted) {
    callHook(vm, 'beforeUpdate')
  }
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const prevActiveInstance = activeInstance
  activeInstance = vm
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  // 1-2-3-6-2-7
  if (!prevVnode) {
    // initial render 1-2-3-6-2-8 首次添加
    vm.$el = vm.__patch__(
      vm.$el, vnode, hydrating, false /* removeOnly */,
      vm.$options._parentElm,
      vm.$options._refElm
    )
  } else {
    // updates
    // 1-2-3-6-2-9 在 src/core/vdom/patch.js 定义
    vm.$el = vm.__patch__(prevVnode, vnode) // 数据变化后触发的DOM更新
  }
  activeInstance = prevActiveInstance
  // update __vue__ reference
  if (prevEl) {
    prevEl.__vue__ = null
  }
  if (vm.$el) {
    vm.$el.__vue__ = vm
  }
  // if parent is an HOC, update its $el as well
  if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
    vm.$parent.$el = vm.$el
  }
  // updated hook is called by the scheduler to ensure that children are
  // updated in a parent's updated hook.
}

// src/core/vdom/patch.js

export function createPatchFunction (backend) {
  // ...
  // patch通过patchVnode来更新根节点
  function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    // ...

    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
        // 1-2-3-6-2-9-2-2 通过updateChildren来更新子节点
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      nodeOps.setTextContent(elm, vnode.text)
    }
    if (hasData) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

  // ...

  return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    if (!vnode) {
      if (oldVnode) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []

    if (!oldVnode) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue, parentElm, refElm)
    } else {
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        // 1-2-3-6-2-9-2
        // diff并更新DOM。
        // 如果是update，则会调动patchVnode()
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
      } else {
        // ...
      }
    }
    // 1-2-3-6-2-9-3 element insert到DOM中
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }
}

// src/core/observer/index.js

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value)) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    observerState.shouldConvert &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // 1-2-5-2-3-2 没有则新建 observer 实例
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

/**
 * Observer构造函数
 * Observer 会和被观察的对象绑定，
 * 并且将目标对象的健 key 转换成 包含getter/setters属性，
 * 就能够收集依赖 dep 同时分发 update
 */
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      // 1-2-5-2-3-2-2
      // Array 则执行 observeArray to convert
      this.observeArray(value)
    } else {
      // 1-2-5-2-3-2-3
      // Array 则执行 walk to convert
      this.walk(value)
    }
  }

  /**
   * Walk through each property and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      // 1-2-5-2-3-2-3-2
      defineReactive(obj, keys[i], obj[keys[i]])
    }
  }

  // ...
}

// 1-2-5-2-3-2-3-2-1 给 Object 定义响应式属性
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: Function
) {
  const dep = new Dep()

  // ...

  let childOb = observe(val)
  // 1-2-5-2-3-2-3-2-2 定义属性
  // 可参考此方法给对象添加新属性
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend() // 1-2-5-2-3-2-3-2-3 处理好依赖watcher
        if (childOb) {
          childOb.dep.depend()
        }
        if (Array.isArray(value)) {
          dependArray(value)
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = observe(newVal) // 1-2-5-2-3-2-3-2-4 对新数据重新observe
      dep.notify() // 1-2-5-2-3-2-3-2-5 通知到dep进行数据更新 在 src/core/observer/dep.js 定义
    }
  })
}