Vue 源码分析（v2.5.15）part 1：Vue 初始化

最新推荐文章于 2024-03-06 15:20:25 发布

转载最新推荐文章于 2024-03-06 15:20:25 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b32f6446fb9a00e4d53f4ba

文章标签：

#json #runtime #测试

本文详细介绍了Vue的初始化流程，包括Vue的定义、静态API和实例API等内容。从项目结构出发，逐步解析Vue的核心代码，帮助读者深入理解Vue的工作原理。

前言

本章主要介绍 Vue 的初始化过程，涉及到 Vue 的定义、静态 API 和实例 API 等，对方法和属性的具体定义不作详解。希望能给大家阅读源码一些帮助。

阅读前提：看过文档，了解 Vue 的用法和其 API。

项目结构

vue
├── BACKERS.md
├── LICENSE
├── README.md
├── benchmarks
├── coverage
├── dist：vue 打包结果
├── examples：使用示例
├── flow：Flow 类型定义
├── package.json
├── packages：打包结果（客户端插件，npm包）
├── scripts：打包配置文件
├── src：源码
│    ├── compiler：模板编译解析
│    ├── core：Vue 核心代码
│    ├── platforms：平台相关（web和weex）
│    ├── server：服务端渲染
│    ├── sfc：vue组件文件解析
│    └── shared：工具方法
├── test：测试用例
├── types：TypeScript 定义
└── yarn.lock
复制代码

模块

按自己的理解画了以下模块图（仅供参考）。

入口文件

首先看项目的 package.json，找到打包命令

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
复制代码

得知打包配置文件 scripts/config.js。

// scripts/config.js
// ...
// Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },
// ...

// scripts/alias.js

web: resolve('src/platforms/web')
复制代码

由此得知入口文件是 src/platforms/web/entry-runtime-with-compiler.js。

Vue 初始化

Vue 的定义

src/platforms/web/entry-runtime-with-compiler.js 
--> src/platforms/web/runtime/index.js 
--> src/core/index.js 
--> src/core/instance/index.js
复制代码

Vue 定义在 src/core/instance/index.js 中：

// src/core/instance/index.js
// Vue 的定义
function Vue (options) {
  // 判断是否通过 new 调用，不是生产环境时会在控制台打印警告
  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) // _init 方法定义
stateMixin(Vue) // 数据相关方法：$data, $props, $set, $delete, $watch
eventsMixin(Vue) // 事件方法：$on, $once, $off, $emit
lifecycleMixin(Vue) // Vue 生命周期：_update, $forceUpdate, $destroy
renderMixin(Vue) // 渲染方法定义：$nextTick, _render
复制代码

Vue 静态 API

src/core/index.js 主要是调用了 initGlobalAPI，给 Vue 添加了静态属性和静态方法。

export function initGlobalAPI (Vue: GlobalAPI) {
  // 设置 config 只读属性，包括 devtools 等
  const configDef = {}
  configDef.get = () => config
  // ...
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  // 暴露工具方法，但不是作为公开的 API（不建议使用）
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  // 暴露静态方法
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  Vue.options = Object.create(null)
  // 设置属性 components, directives, filters
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  // Vue.options.components.KeepAlive
  extend(Vue.options.components, builtInComponents)

  // Vue.use
  initUse(Vue)
  // Vue.mixin
  initMixin(Vue)
  // Vue.extend
  initExtend(Vue)
  // Vue.component, Vue.directive, Vue.filter
  initAssetRegisters(Vue)
}
复制代码

平台特定 API

src/platforms/web/runtime/index.js 给 Vue 添加了 web 平台的方法，运行时指令和组件，添加实例方法 $mount。

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
复制代码

模板编译器

上面的代码已经完成了 Vue 运行时的初始化，最后的 src/platforms/web/entry-runtime-with-compiler.js 修改了实例方法 $mount，实际上是添加了模板编译器。

可以和打包配置文件 scripts/config.js 中的 web-runtime-prod 配置项作比对。

// 先保存原来的 $mount，在最后会调用
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }
  
  /***********************************************
   * 当不存在 options.render 时
   * 通过处理挂载的模板（编译成渲染函数）
   * 来定义 options.render 和 options.staticRenderFns
   **********************************************/
  const options = this.$options
  // resolve template/el and convert to render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        // 如果传入模板id，通过id获取dom
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        // 如果传入模板 dom，取出 innerHTML 字符串
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // 如果传入的是el，取el的 outerHtml 作为模板
      template = getOuterHTML(el)
    }
    // 判断经过上面的处理后，模板有没有值
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      // 能过编译器把模板处理成渲染函数，并赋值到 options
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  //////////////////////////////////////////////
  
  // 调用了上面保存的 mount 方法
  return mount.call(this, el, hydrating)
}
复制代码