René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Vue源码系列——Vue 的初始化","articleBody":"# Vue源码系列--初始化\r\n\r\n最近在看 Vue 的源码架构，打算在公司组织 Vue 源码的分享会，所以准备做一系列关于 Vue 源码的技术输出。\r\n\r\n## 目录结构\r\n\r\n先来大致看下 vue 目录结构，这里只列出 src 目录下的文件结构。\r\n\r\n```\r\n├── src\r\n\t├── compiler -------------------------------- 编译器代码，将 template 模板编译成 render 函数\r\n\t├── core ------------------------------------ 核心代码，主要包括响应式原理，vdom，全局 API 等\r\n\t├── platforms ------------------------------- 平台代码\r\n\t\t├── web --------------------------------- web 端代码\r\n\t\t├── weex -------------------------------- 移动端混合开发代码\r\n\t├── server ----------------------------------- ssr 服务端渲染\r\n\t├── sfc -------------------------------------- .vue 单文件组件解析\r\n\t├── shared ----------------------------------- 通用代码，定义的一些工具函数和常量\r\n```\r\n\r\n## Vue 的入口文件\r\n\r\n分析 Vue 源码首先要找到 Vue 的入口文件，从入口开始，一步步深入了解实现原理。在跟目录下的 package.json 文件中找到构建配置。\r\n\r\n```javascript\r\n  \"scripts\": {\r\n    \"dev\": \"rollup -w -c scripts/config.js --environment TARGET:web-full-dev\",\r\n    \"dev:cjs\": \"rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev\",\r\n    \"dev:esm\": \"rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm\",\r\n    \"dev:test\": \"karma start test/unit/karma.dev.config.js\",\r\n    \"dev:ssr\": \"rollup -w -c scripts/config.js --environment TARGET:web-server-renderer\",\r\n    \"dev:compiler\": \"rollup -w -c scripts/config.js --environment TARGET:web-compiler \",\r\n    \"dev:weex\": \"rollup -w -c scripts/config.js --environment TARGET:weex-framework\",\r\n    \"dev:weex:factory\": \"rollup -w -c scripts/config.js --environment TARGET:weex-factory\",\r\n    \"dev:weex:compiler\": \"rollup -w -c scripts/config.js --environment TARGET:weex-compiler \",\r\n    \"build\": \"node scripts/build.js\",\r\n    \"build:ssr\": \"npm run build -- web-runtime-cjs,web-server-renderer\",\r\n    \"build:weex\": \"npm run build -- weex\",\r\n    \"test\": \"npm run lint \u0026\u0026 flow check \u0026\u0026 npm run test:types \u0026\u0026 npm run test:cover \u0026\u0026 npm run test:e2e -- --env phantomjs \u0026\u0026 npm run test:ssr \u0026\u0026 npm run test:weex\",\r\n    \"test:unit\": \"karma start test/unit/karma.unit.config.js\",\r\n    \"test:cover\": \"karma start test/unit/karma.cover.config.js\",\r\n    \"test:e2e\": \"npm run build -- web-full-prod,web-server-basic-renderer \u0026\u0026 node test/e2e/runner.js\",\r\n    \"test:weex\": \"npm run build:weex \u0026\u0026 jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js\",\r\n    \"test:ssr\": \"npm run build:ssr \u0026\u0026 jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js\",\r\n    \"test:sauce\": \"npm run sauce -- 0 \u0026\u0026 npm run sauce -- 1 \u0026\u0026 npm run sauce -- 2\",\r\n    \"test:types\": \"tsc -p ./types/test/tsconfig.json\",\r\n    \"lint\": \"eslint src scripts test\",\r\n    \"flow\": \"flow check\",\r\n    \"sauce\": \"karma start test/unit/karma.sauce.config.js\",\r\n    \"bench:ssr\": \"npm run build:ssr \u0026\u0026 node benchmarks/ssr/renderToString.js \u0026\u0026 node benchmarks/ssr/renderToStream.js\",\r\n    \"release\": \"bash scripts/release.sh\",\r\n    \"release:weex\": \"bash scripts/release-weex.sh\",\r\n    \"release:note\": \"node scripts/gen-release-note.js\",\r\n    \"commit\": \"git-cz\"\r\n  }\r\n```\r\n\r\n可以看到，针对不同模块的构建输出设置了不同的构建脚本，这里只看 dev 脚本的，也就是运行 ```npm run dev```。运行脚本的时候，会找到 scripts/config.js 执行，然后在 config.js 中找到 web-full-dev  的配置。\r\n\r\n![](https://user-gold-cdn.xitu.io/2019/6/29/16ba1336949071a4?w=1218\u0026h=664\u0026f=png\u0026s=93679)\r\n\r\n可以看到，构建时的入口文件是 web/entry-runtime-with-compiler.js 。这里的 web 其实是配置的相对路径的别名，相关的配置都写在 scripts/alias.js 中。\r\n\r\n![](https://user-gold-cdn.xitu.io/2019/6/29/16ba13715e447ee8?w=1252\u0026h=738\u0026f=png\u0026s=129066)\r\n\r\n顺着路口文件一路找下去，可以看到 Vue 被定义在 src/core/instance/index.js 中。\r\n\r\n```javascript\r\nimport { initMixin } from './init'\r\nimport { stateMixin } from './state'\r\nimport { renderMixin } from './render'\r\nimport { eventsMixin } from './events'\r\nimport { lifecycleMixin } from './lifecycle'\r\nimport { warn } from '../util/index'\r\n\r\n/**\r\n * Vue 构造器\r\n * @param {*} options\r\n */\r\nfunction Vue (options) {\r\n  if (process.env.NODE_ENV !== 'production' \u0026\u0026\r\n    !(this instanceof Vue)\r\n  ) {\r\n    warn('Vue is a constructor and should be called with the `new` keyword')\r\n  }\r\n  this._init(options)\r\n}\r\n\r\ninitMixin(Vue)\r\nstateMixin(Vue)\r\neventsMixin(Vue)\r\nlifecycleMixin(Vue)\r\nrenderMixin(Vue)\r\n\r\nexport default Vue\r\n```\r\n\r\n这个文件的主要作用是定义了一个 Vue 构造器，里面通过执行 _init 函数进行初始化，这也说明了 Vue 必须通过 new 关键字来初始化。Vue 构造器接收的 options 就是在 new  Vue 时传入的配置项。\r\n\r\n## new Vue 的过程\r\n\r\n通过内部定义的 Vue 构造器可以看到，new Vue 时，内部会通过调用 _init 函数进行初始化。_init 函数是挂载在 Vue 原型上的方法，代码定义在 initMixin 中，也就是 src/core/instance/init.js。\r\n\r\n```javascript\r\n// 挂载到 Vue 原型上\r\n  Vue.prototype._init = function (options?: Object) {\r\n    const vm: Component = this\r\n    // a uid\r\n    vm._uid = uid++\r\n\r\n    let startTag, endTag\r\n    /* istanbul ignore if */\r\n    // 性能分析\r\n    if (process.env.NODE_ENV !== 'production' \u0026\u0026 config.performance \u0026\u0026 mark) {\r\n      startTag = `vue-perf-start:${vm._uid}`\r\n      endTag = `vue-perf-end:${vm._uid}`\r\n      mark(startTag)\r\n    }\r\n\r\n    // a flag to avoid this being observed\r\n    vm._isVue = true\r\n    // merge options\r\n    // 合并配置项\r\n    if (options \u0026\u0026 options._isComponent) {\r\n      // optimize internal component instantiation\r\n      // since dynamic options merging is pretty slow, and none of the\r\n      // internal component options needs special treatment.\r\n      initInternalComponent(vm, options)\r\n    } else {\r\n      vm.$options = mergeOptions(\r\n        resolveConstructorOptions(vm.constructor),\r\n        options || {},\r\n        vm\r\n      )\r\n    }\r\n    /* istanbul ignore else */\r\n    if (process.env.NODE_ENV !== 'production') {\r\n      initProxy(vm)\r\n    } else {\r\n      vm._renderProxy = vm\r\n    }\r\n    // expose real self\r\n    vm._self = vm\r\n    // 初始化生命周期\r\n    initLifecycle(vm)\r\n    // 初始化事件\r\n    initEvents(vm)\r\n    // 初始化渲染\r\n    initRender(vm)\r\n    // beforeCreate 生命周期钩子函数阶段\r\n    callHook(vm, 'beforeCreate')\r\n    // 初始化 injections\r\n    initInjections(vm) // resolve injections before data/props\r\n    // 初始化 props,methods，data 等\r\n    initState(vm)\r\n    // 初始化 provide\r\n    initProvide(vm) // resolve provide after data/props\r\n    // created 生命周期钩子函数阶段\r\n    callHook(vm, 'created')\r\n\r\n    /* istanbul ignore if */\r\n    // 性能分析\r\n    if (process.env.NODE_ENV !== 'production' \u0026\u0026 config.performance \u0026\u0026 mark) {\r\n      vm._name = formatComponentName(vm, false)\r\n      mark(endTag)\r\n      measure(`vue ${vm._name} init`, startTag, endTag)\r\n    }\r\n\r\n    // 挂载\r\n    if (vm.$options.el) {\r\n      vm.$mount(vm.$options.el)\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n_init 函数的作用主要是合并初始化配置项，初始化事件监听，初始化渲染等操作。可以看到的是，initState 函数也就是初始化配置项是在 beforeCreate 钩子函数阶段后，created 钩子函数阶段前完成的，所以在  beforeCreate 钩子函数阶段是不能访问和操作数据的。\r\n\r\n### 合并配置选项\r\n\r\n```javascript\r\n// 合并配置项\r\nif (options \u0026\u0026 options._isComponent) {\r\n    // optimize internal component instantiation\r\n    // since dynamic options merging is pretty slow, and none of the\r\n    // internal component options needs special treatment.\r\n    initInternalComponent(vm, options)\r\n} else {\r\n    vm.$options = mergeOptions(\r\n        resolveConstructorOptions(vm.constructor),\r\n        options || {},\r\n        vm\r\n    )\r\n}\r\n```\r\n\r\n这段代码就是用来合并配置选项的。这里只考虑根实例的初始化，组件实例的初始化暂不考虑，也就是 new Vue 初始化。所以代码会进入到 else 代码块，执行 mergeOptions 函数进行合并。mergeOptions  函数接受 3 个参数，第一个参数执行一个函数并得到返回值，其值就相当于是 Vue.options。第二个参数就是传入的配置项，第三个参数是 Vue 实例。Vue.options 定义在 src/core/global-api/index.js 中。\r\n\r\n![](https://user-gold-cdn.xitu.io/2019/6/29/16ba1e96649a1e99?w=1442\u0026h=738\u0026f=png\u0026s=117594)\r\n\r\n首先给 Vue.options 赋值了一个空对象，然后通过遍历 ASSET_TYPES 数组给 Vue.options 添加属性。ASSET_TYPES 定义在 src/shared/constants.js 中。\r\n\r\n```javascript\r\nexport const ASSET_TYPES = [\r\n  'component',\r\n  'directive',\r\n  'filter'\r\n]\r\n```\r\n\r\n然后再执行拷贝函数将 KeepAlive 组件赋值给 components 属性值。最终 Vue.options 的值如下：\r\n\r\n```javascript\r\nVue.options = {\r\n    components: {\r\n        KeepAlive\r\n    },\r\n    directives: {},\r\n    filters: {}\r\n}\r\n```\r\n\r\n到此就明白了 mergeOptions 函数的参数类型了。接下来看下 mergeOptions  函数是怎么合并配置选项的。\r\n\r\n```javascript\r\nexport function mergeOptions (\r\n  parent: Object,\r\n  child: Object,\r\n  vm?: Component\r\n): Object {\r\n  if (process.env.NODE_ENV !== 'production') {\r\n    checkComponents(child)\r\n  }\r\n\r\n  if (typeof child === 'function') {\r\n    child = child.options\r\n  }\r\n\r\n  // 规范化 props\r\n  normalizeProps(child, vm)\r\n  // 规范化 inject\r\n  normalizeInject(child, vm)\r\n  // 规范化 directives\r\n  normalizeDirectives(child)\r\n\r\n  // Apply extends and mixins on the child options,\r\n  // but only if it is a raw options object that isn't\r\n  // the result of another mergeOptions call.\r\n  // Only merged options has the _base property.\r\n  if (!child._base) {\r\n    if (child.extends) {\r\n      parent = mergeOptions(parent, child.extends, vm)\r\n    }\r\n    if (child.mixins) {\r\n      for (let i = 0, l = child.mixins.length; i \u003c l; i++) {\r\n        parent = mergeOptions(parent, child.mixins[i], vm)\r\n      }\r\n    }\r\n  }\r\n  \r\n  // 合并配置项代码\r\n  const options = {}\r\n  let key\r\n  for (key in parent) {\r\n    mergeField(key)\r\n  }\r\n  for (key in child) {\r\n    if (!hasOwn(parent, key)) {\r\n      mergeField(key)\r\n    }\r\n  }\r\n  function mergeField (key) {\r\n    const strat = strats[key] || defaultStrat\r\n    options[key] = strat(parent[key], child[key], vm, key)\r\n  }\r\n  return options\r\n}\r\n```\r\n\r\nmergeOptions 函数首先会对一些配置项进行规范化，比如 props，inject 依赖注入，directives 自定义指令。拿props 为例，这个属性是用来父组件向子组件传参用的，其值的写法有很多种。\r\n\r\n```javascript\r\n// 第 1 种：数组形式\r\nprops: ['size', 'disabled']\r\n\r\n// 第 2 种\r\nprops: {\r\n    size: String,\r\n    disabled: Boolean    \r\n}\r\n\r\n// 第 3 种\r\nprops: {\r\n    size: {\r\n        type: String   \r\n    },\r\n    disabled: {\r\n        type: Boolean\r\n    }    \r\n}\r\n```\r\n\r\n对于第 1 种和第 2 种写法，在 Vue 内部会统一规范化成第 3 种形式的写法。规范化函数如下：\r\n\r\n```javascript\r\nfunction normalizeProps (options: Object, vm: ?Component) {\r\n  const props = options.props\r\n  if (!props) return\r\n  const res = {}\r\n  let i, val, name\r\n\r\n  // props 是数组或对象的情况\r\n  if (Array.isArray(props)) {\r\n    i = props.length\r\n    while (i--) {\r\n      val = props[i]\r\n      if (typeof val === 'string') {\r\n        name = camelize(val)\r\n        res[name] = { type: null }\r\n      } else if (process.env.NODE_ENV !== 'production') {\r\n        warn('props must be strings when using array syntax.')\r\n      }\r\n    }\r\n  } else if (isPlainObject(props)) {\r\n    for (const key in props) {\r\n      val = props[key]\r\n      name = camelize(key)\r\n      res[name] = isPlainObject(val)\r\n        ? val\r\n        : { type: val }\r\n    }\r\n  } else if (process.env.NODE_ENV !== 'production') {\r\n    warn(\r\n      `Invalid value for option \"props\": expected an Array or an Object, ` +\r\n      `but got ${toRawType(props)}.`,\r\n      vm\r\n    )\r\n  }\r\n  options.props = res\r\n}\r\n```\r\n\r\n对选项的值规范化后，就开始进入到选项合并阶段了，首先会遍历 Vue 内部提供的默认配置项并自行 mergeField 函数，再接着遍历传入的配置项执行 mergeField 函数。mergeField 函数时关键，函数内部会针对不同的配置项进行相应的合并处理。\r\n\r\n```javascript\r\n// 合并配置项代码\r\n  const options = {}\r\n  let key\r\n  for (key in parent) {\r\n    mergeField(key)\r\n  }\r\n  for (key in child) {\r\n    if (!hasOwn(parent, key)) {\r\n      mergeField(key)\r\n    }\r\n  }\r\n  function mergeField (key) {\r\n    const strat = strats[key] || defaultStrat\r\n    options[key] = strat(parent[key], child[key], vm, key)\r\n  }\r\n  return options\r\n```\r\n\r\nstrats 是定义的一个空对象，Vue 内部会将配置项合并函数作为属性挂载到这个对象上，包括 data 选项合并函数，生命周期选项合并函数，watch，props，methods 等选项合并函数。Vue 的配置项合并规则在官方文档中解释得很清楚了，合并规则就是：\r\n\r\n* 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。\r\n* 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 \r\n* 值为对象的选项，例如 `methods`、`components` 和 `directives`，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。\r\n\r\n整个 options.js 的作用都是用来合并配置项的。\r\n\r\n### Vue 的挂载\r\n\r\n合并配置项完成后，接着就会进行一些初始化。\r\n\r\n```javascript\r\n// 初始化生命周期\r\ninitLifecycle(vm)\r\n// 初始化事件监听\r\ninitEvents(vm)\r\n// 初始化渲染\r\ninitRender(vm)\r\n// beforeCreate 生命周期钩子函数阶段\r\ncallHook(vm, 'beforeCreate')\r\n// 初始化 injections\r\ninitInjections(vm) // resolve injections before data/props\r\n// 初始化 props,methods，data 等配置项\r\ninitState(vm)\r\n// 初始化 provide\r\ninitProvide(vm) // resolve provide after data/props\r\n// created 生命周期钩子函数阶段\r\ncallHook(vm, 'created')\r\n\r\n```\r\n\r\n需要注意的是，对于 props,methods，data 等配置项的初始化是发生在 beforeCreate 钩子函数之后， created 钩子函数之前的，所以，在 beforeCreate 钩子函数阶段是不能访问好操作数据的，必须是至少在 created 钩子函数阶段才能访问和操作。\r\n\r\n完成了上面的初始化之后，就会进入到挂载阶段。\r\n\r\n```javascript\r\n// 挂载\r\nif (vm.$options.el) {\r\n    vm.$mount(vm.$options.el)\r\n}\r\n```\r\n\r\n$mount 函数定义在 src\\platforms\\web\\entry-runtime-with-compiler.js。\r\n\r\n```javascript\r\nconst mount = Vue.prototype.$mount\r\nVue.prototype.$mount = function (\r\n  el?: string | Element,\r\n  hydrating?: boolean\r\n): Component {\r\n  el = el \u0026\u0026 query(el)\r\n\r\n  /* istanbul ignore if */\r\n  if (el === document.body || el === document.documentElement) {\r\n    process.env.NODE_ENV !== 'production' \u0026\u0026 warn(\r\n      `Do not mount Vue to \u003chtml\u003e or \u003cbody\u003e - mount to normal elements instead.`\r\n    )\r\n    return this\r\n  }\r\n\r\n  const options = this.$options\r\n  // resolve template/el and convert to render function\r\n  if (!options.render) {\r\n    let template = options.template\r\n    if (template) {\r\n      if (typeof template === 'string') {\r\n        if (template.charAt(0) === '#') {\r\n          template = idToTemplate(template)\r\n          /* istanbul ignore if */\r\n          if (process.env.NODE_ENV !== 'production' \u0026\u0026 !template) {\r\n            warn(\r\n              `Template element not found or is empty: ${options.template}`,\r\n              this\r\n            )\r\n          }\r\n        }\r\n      } else if (template.nodeType) {\r\n        template = template.innerHTML\r\n      } else {\r\n        if (process.env.NODE_ENV !== 'production') {\r\n          warn('invalid template option:' + template, this)\r\n        }\r\n        return this\r\n      }\r\n    } else if (el) {\r\n      template = getOuterHTML(el)\r\n    }\r\n    if (template) {\r\n      /* istanbul ignore if */\r\n      if (process.env.NODE_ENV !== 'production' \u0026\u0026 config.performance \u0026\u0026 mark) {\r\n        mark('compile')\r\n      }\r\n\r\n      const { render, staticRenderFns } = compileToFunctions(template, {\r\n        outputSourceRange: process.env.NODE_ENV !== 'production',\r\n        shouldDecodeNewlines,\r\n        shouldDecodeNewlinesForHref,\r\n        delimiters: options.delimiters,\r\n        comments: options.comments\r\n      }, this)\r\n      options.render = render\r\n      options.staticRenderFns = staticRenderFns\r\n\r\n      /* istanbul ignore if */\r\n      if (process.env.NODE_ENV !== 'production' \u0026\u0026 config.performance \u0026\u0026 mark) {\r\n        mark('compile end')\r\n        measure(`vue ${this._name} compile`, 'compile', 'compile end')\r\n      }\r\n    }\r\n  }\r\n  return mount.call(this, el, hydrating)\r\n}\r\n```\r\n\r\n整个函数的作用都是在把模板编译成 render 函数，再把 VDOM 转换成真实的 DOM 元素放入到 document 文档中。这里有一个需要知道的点就是，如果配置项中没有定义 render 配置项，就会选取 template 配置项作为模板编译成 render 函数，如果 template 配置项也不存在，那就直接选取 外部 HTML 作为模板进行编译。优先级是 ender 函数选项-template选项-外部HTML。最后会通过调用定义在 src\\core\\instance\\lifecycle.js 中的 mountComponent 函数转换成真实 DOM。\r\n\r\n在 mountComponent 函数内部，会进入 beforeMount 钩子函数阶段和 mounted 钩子函数阶段，需要注意的是，vue 的挂载完成是在 beforeMount 钩子函数之后和 mounted 钩子函数之前发生的，所以 vm.$el 至少是在 mounted 钩子函数阶段才能访问到。\r\n\r\n### Vue 生命周期\r\n\r\n* 在 beforeCreate 阶段也就是实例初始化但是还没创建完成的时候，数据监测和事件初始化还没完成，不能对任何数据访问操作。\r\n* created 阶段，实例创建完成，数据监测和事件初始化也都完成，可以访问和操作 data 数据，但是在这一步，$el 还获取不到，这一步可以开始一些数据请求的操作。\r\n* 实例创建完成后，就进入到挂载阶段，在挂载阶段就可以访问 $el 的值了。要说明的是进入挂载阶段前，会先判断传入的配置项中是否有 el 属性，如果有才会继续初始化，如果没有初始化会暂停，等到执行了 vm.$mount(el) 后才会继续。在 beforeMount 阶段，内部会找到 template 配置项作为模板进行编译成 render 函数,如果没有template 配置项，则使用外部 HTML 作为模板，如果有直接配置 render 函数，则直接使用配置的 render 函数，优先级是：render 函数选项-template选项-外部HTML。并且在 beforeMount 阶段，$el 获取的值还是双大括号的 vue 语法，只是个占位符，内容还没有被替换掉。\r\n* 当执行完 render function之后，到了mounted阶段，el被创建的vm.$el替换掉，挂载完成。到这里为止，初始化过程中会触发上面这些钩子函数，更新和销毁钩子函数都需要手动触发的。\r\n* 当修改 data 选项中的数据时，会触发 beforeUpdate 和 updated，虚拟 DOM 按照 DIFF 算法重新渲染和打补丁，最后 DOM 更新完成后进入到 updated 阶段。\r\n* beforeDestory 是在vue实例销毁之前调用，在这里，实例仍然可以访问操作，一般在这一步中进行：销毁定时器、解绑全局事件、销毁插件对象等操作。\r\n* destoryed 在实例销毁后调用，所有指令都将会解绑，事件监听移除，子实例也会销毁。\r\n\r\n## 总结\r\n\r\nnew Vue的时候，内部会调用 _init 函数进行初始化，主要是初始化事件监听，初始化渲染，初始化配置项，实例挂载等操作。初始化的时候，会执行 beforeCreate, created, beforeMount, mounted 生命周期钩子函数。\r\n\r\n","author":{"url":"https://github.com/webproblem","@type":"Person","name":"webproblem"},"datePublished":"2019-07-06T03:08:32.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/15/Blog/issues/15"}