摘要：下載去上下載運(yùn)行起來使用使用打包，規(guī)范數(shù)據(jù)類型可以先用套用，讀起來差不多，時(shí)間有限，畢竟只有分鐘，這個(gè)就不用去看文檔了入口打開我們看配置找到打開根據(jù)配置的不同會(huì)選擇不同的同時(shí)在這里配置了環(huán)境有，，關(guān)于引入類型的還有

去github上下載Vue

npm install 
npm run dev

運(yùn)行起來

vue使用使用rollup打包，flow規(guī)范數(shù)據(jù)類型

rollup可以先用webpack套用，讀起來差不多，時(shí)間有限，畢竟只有5分鐘，這個(gè)就不用去看rollup文檔了

打開package.json
我們看scripts配置

 "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
  "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",

找到scripts/config.js
打開

根據(jù)配置TARGET的不同會(huì)選擇不同的config

同時(shí)在這里配置了process.env.NODE_ENV 環(huán)境

TARGET有CommonJS，ES Modules，UMD關(guān)于js引入類型的
還有weex，ssr

"web-runtime-cjs-dev": {
    entry: resolve("web/entry-runtime.js"),
    dest: resolve("dist/vue.runtime.common.dev.js"),
    format: "cjs",
    env: "development",
    banner
  }

在alias.js下設(shè)置了別名路徑
我們先介紹src/platforms

里面有web和weex 分別的web和weex入口

在web文件下是CommonJS，ES Modules，UMD關(guān)于js引入類型，server的打包入口

打開web/entry-runtime.js
引入

import Vue from "./runtime/index"

export default Vue

打開./runtime/index

import Vue from "core/index"

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
export default Vue

在vue原型上添加了mount方法
處理了devtools，沒有安裝提醒安裝devtools

給了這句提示dev環(huán)境提示

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

platforms目錄夾講解完畢

打開core/instance/index
映入眼前的是

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

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

先執(zhí)行的是initMixin(Vue)

打開init

export function initMixin (Vue) {
  Vue.prototype._init = function (options?: Object) {
    const vm = this
    // a uid 
    vm._uid = uid++
    
    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production" && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // 處理傳入的options
    // 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 {
       // 傳入的options,默認(rèn)的options一起合并掛載到vm.$options上
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== "production") {
      // 代理
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // 生命周期
    initLifecycle(vm)
     // emit on 事件
    initEvents(vm)
    // 處理render vdom
    initRender(vm)
    callHook(vm, "beforeCreate")
    // 處理Injections
    initInjections(vm) // resolve injections before data/props
    // 雙向數(shù)據(jù)綁定，監(jiān)聽訂閱
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, "created")
    
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== "production" && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
    // 渲染到dom
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

打開 lifecycle

export function callHook (vm: Component, hook: string) {
  // disable dep collection when invoking lifecycle hooks
  pushTarget()
  //執(zhí)行對象的周期函數(shù)，周期函數(shù)最后被處理成數(shù)組
  const handlers = vm.$options[hook]
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit("hook:" + hook)
  }
  popTarget()

callHook 的時(shí)候，是執(zhí)行相應(yīng)周期，開發(fā)者在周期函數(shù)里所寫的

initEvents實(shí)現(xiàn)了 emit on 等方法，請參考監(jiān)聽者訂閱者模式，這里不詳解

添加了 $nextTick _render 原型對象

$nextTick會(huì)在dom跟新后立即調(diào)用

nextTick(fn, this)是一個(gè)自執(zhí)行函數(shù)

_render返回的是node的js數(shù)據(jù)，還不是dom

做了Vdom

給vm添加了_c和 $createElement用來渲染的方法

if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }

給vue屬性做代理，訪問this.a可以得到this.data.a 的值

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 && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

給數(shù)據(jù)做監(jiān)聽

stateMixin函數(shù)

添加原型對象

 Vue.prototype.$set = set
 Vue.prototype.$delete = del

src/compiler 做了編譯處理

core/componetd 做了keep-alive

core/util 封裝了通用方法

core/vdom vdom算法

以上整體架構(gòu)分析完畢

附張圖