[ { "path": ".flowconfig", "content": "[ignore]\n.*/node_modules/.*\n.*/test/.*\n.*/build/.*\n.*/examples/.*\n.*/benchmarks/.*\n\n[include]\n\n[libs]\nflow\n\n[options]\nunsafe.enable_getters_and_setters=true\nmodule.name_mapper='^compiler/\\(.*\\)$' -> '/src/compiler/\\1'\nmodule.name_mapper='^core/\\(.*\\)$' -> '/src/core/\\1'\nmodule.name_mapper='^shared/\\(.*\\)$' -> '/src/shared/\\1'\nmodule.name_mapper='^web/\\(.*\\)$' -> '/src/platforms/web/\\1'\nmodule.name_mapper='^weex/\\(.*\\)$' -> '/src/platforms/weex/\\1'\nmodule.name_mapper='^server/\\(.*\\)$' -> '/src/server/\\1'\nmodule.name_mapper='^entries/\\(.*\\)$' -> '/src/entries/\\1'\nmodule.name_mapper='^sfc/\\(.*\\)$' -> '/src/sfc/\\1'\nsuppress_comment= \\\\(.\\\\|\\n\\\\)*\\\\$flow-disable-line\n" }, { "path": ".gitignore", "content": ".idea/\nnode_modules\ndist\nexample/\n.DS_Store\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2017 HuangYi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Vue.js 技术揭秘\n\n[电子书](https://ustbhuangyi.github.io/vue-analysis/)\n\n目前社区有很多 Vue.js 的源码解析文章，但是质量层次不齐，不够系统和全面，这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理，让同学们可以彻底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0，并且之后会随着版本升级而做相应的更新，充分发挥电子书的优势。\n\n这本电子书是作为 [《Vue.js 源码揭秘》](http://coding.imooc.com/class/228.html)视频课程的辅助教材。电子书是开源的，同学们可以免费阅读，视频是收费的，25+小时纯干货课程，如果有需要的同学可以购买来学习，**但请务必支持正版，请尊重作者的劳动成果**。\n\n## 章节目录\n\n为了把 Vue.js 的源码讲明白，课程设计成由浅入深，分为核心、编译、扩展、生态四个方面去讲，并拆成了八个章节，如下图：\n\n\n\n**第一章：准备工作**\n\n介绍了 Flow、Vue.js 的源码目录设计、Vue.js 的源码构建方式，以及从入口开始分析了 Vue.js 的初始化过程。\n\n**第二章：数据驱动**\n\n详细讲解了模板数据到 DOM 渲染的过程，从 `new Vue` 开始，分析了 `mount`、`render`、`update`、`patch` 等流程。\n\n**第三章：组件化**\n\n分析了组件化的实现原理，并且分析了组件周边的原理实现，包括合并配置、生命周期、组件注册、异步组件。\n\n**第四章：深入响应式原理**\n\n详细讲解了数据的变化如何驱动视图的变化，分析了响应式对象的创建，依赖收集、派发更新的实现过程，一些特殊情况的处理，并对比了计算属性和侦听属性的实现，最后分析了组件更新的过程。\n\n**第五章：编译**\n\n从编译的入口函数开始，分析了编译的三个核心流程的实现：`parse` -> `optimize` -> `codegen`。\n\n**第六章：扩展**\n\n详细讲解了 `event`、`v-model`、`slot`、`keep-alive`、`transition`、`transition-group` 等常用功能的原理实现，该章节作为一个可扩展章节，未来会分析更多 Vue 提供的特性。\n\n**第七章：Vue-Router**\n\n分析了 Vue-Router 的实现原理，从路由注册开始，分析了路由对象、`matcher`，并深入分析了整个路径切换的实现过程和细节。\n\n**第八章：Vuex**\n\n分析了 Vuex 的实现原理，深入分析了它的初始化过程，常用 API 以及插件部分的实现。\n\n\n" }, { "path": "build.sh", "content": "#!/usr/bin/env sh\n\nset -e\nnpm run build\n\ncd dist\n\ngit init\ngit add -A\ngit commit -m 'deploy'\n\ngit push -f git@github.com:ustbhuangyi/vue-analysis.git master:gh-pages\n\ncd -\n" }, { "path": "docs/.vuepress/config.js", "content": "module.exports = {\n base: '/vue-analysis/',\n dest: 'dist',\n title: 'Vue.js 技术揭秘',\n description: 'Analysis vue.js deeply',\n head: [\n ['link', { rel: 'icon', href: `/logo.png` }],\n ['link', { rel: 'manifest', href: '/manifest.json' }],\n ['meta', { name: 'theme-color', content: '#3eaf7c' }],\n ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],\n ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],\n ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],\n ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],\n ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],\n ['meta', { name: 'msapplication-TileColor', content: '#000000' }]\n ],\n serviceWorker: false,\n themeConfig: {\n repo: 'ustbhuangyi/vue-analysis',\n editLinks: true,\n docsDir: 'docs',\n editLinkText: '在 GitHub 上编辑此页',\n lastUpdated: '上次更新',\n nav: [\n {\n text: '2.x 版本',\n link: '/v2/prepare/'\n },\n {\n text: '3.x 版本',\n link: '/v3/new/'\n },\n {\n text: '2.x 源码配套视频',\n link: 'https://coding.imooc.com/class/228.html'\n },\n {\n text: '3.x 源码解析课程',\n link: 'https://kaiwu.lagou.com/course/courseInfo.htm?courseId=326#/content'\n },\n {\n text: 'React技术揭秘',\n link: 'https://react.iamkasong.com/'\n }\n ],\n sidebar: {\n '/v2/': [\n {\n title: '准备工作',\n collapsable: false,\n children: [\n ['prepare/', 'Introduction'],\n 'prepare/flow',\n 'prepare/directory',\n 'prepare/build',\n 'prepare/entrance'\n ]\n },\n {\n title: '数据驱动',\n collapsable: false,\n children: [\n ['data-driven/', 'Introduction'],\n 'data-driven/new-vue',\n 'data-driven/mounted',\n 'data-driven/render',\n 'data-driven/virtual-dom',\n 'data-driven/create-element',\n 'data-driven/update'\n ]\n },\n {\n title: '组件化',\n collapsable: false,\n children: [\n ['components/', 'Introduction'],\n 'components/create-component',\n 'components/patch',\n 'components/merge-option',\n 'components/lifecycle',\n 'components/component-register',\n 'components/async-component'\n ]\n },\n {\n title: '深入响应式原理',\n collapsable: false,\n children: [\n ['reactive/', 'Introduction'],\n 'reactive/reactive-object',\n 'reactive/getters',\n 'reactive/setters',\n 'reactive/next-tick',\n 'reactive/questions',\n 'reactive/computed-watcher',\n 'reactive/component-update',\n 'reactive/props',\n 'reactive/summary'\n ]\n },\n {\n title: '编译',\n collapsable: false,\n children: [\n ['compile/', 'Introduction'],\n 'compile/entrance',\n 'compile/parse',\n 'compile/optimize',\n 'compile/codegen'\n ]\n },\n {\n title: '扩展',\n collapsable: false,\n children: [\n ['extend/', 'Introduction'],\n 'extend/event',\n 'extend/v-model',\n 'extend/slot',\n 'extend/keep-alive',\n 'extend/tansition',\n 'extend/tansition-group'\n ]\n },\n {\n title: 'Vue Router',\n collapsable: false,\n children: [\n ['vue-router/', 'Introduction'],\n 'vue-router/install',\n 'vue-router/router',\n 'vue-router/matcher',\n 'vue-router/transition-to'\n ]\n },\n {\n title: 'Vuex',\n collapsable: false,\n children: [\n ['vuex/', 'Introduction'],\n 'vuex/init',\n 'vuex/api',\n 'vuex/plugin'\n ]\n }\n ],\n '/v3/': [\n {\n title: '先导篇',\n collapsable: false,\n children: [\n ['guide/', 'Introduction']\n ]\n },\n {\n title: 'Vue.js 3.0 核心源码解析​',\n collapsable: false,\n children: [\n ['new/', 'Introduction']\n ]\n }\n ]\n }\n }\n}\n" }, { "path": "docs/.vuepress/public/manifest.json", "content": "{\n \"name\": \"VueAnalysis\",\n \"short_name\": \"VueAnalysis\",\n \"icons\": [\n {\n \"src\": \"/icons/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/icons/android-chrome-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"start_url\": \"/vue-analysis/\",\n \"display\": \"standalone\",\n \"background_color\": \"#fff\",\n \"theme_color\": \"#3eaf7c\"\n}\n" }, { "path": "docs/README.md", "content": "## 前言\n\n目前社区有很多 Vue.js 的源码解析文章，但是质量层次不齐，不够系统和全面，这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理，让同学们可以彻底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0，并且之后会随着版本升级而做相应的更新，充分发挥电子书的优势。\n\n这本电子书是作为 [《Vue.js 源码揭秘》](http://coding.imooc.com/class/228.html)视频课程的辅助教材。电子书是开源的，同学们可以免费阅读，视频是收费的，25+小时纯干货课程，如果有需要的同学可以购买来学习，**但请务必支持正版，请尊重作者的劳动成果**。\n\n## 章节目录\n\n为了把 Vue.js 的源码讲明白，课程设计成由浅入深，分为核心、编译、扩展、生态四个方面去讲，并拆成了八个章节，如下图：\n\n\n\n**第一章：准备工作**\n\n介绍了 Flow、Vue.js 的源码目录设计、Vue.js 的源码构建方式，以及从\b入口开始分析了 Vue.js 的初始化过程。\n\n**第二章：数据驱动**\n\n详细讲解了模板数据到 DOM 渲染的过程，从 `new Vue` 开始，分析了 `mount`、`render`、`update`、`patch` 等流程。\n\n**第三章：组件化**\n\n分析了组件化的实现原理，并且分析了组件周边的原理实现，包括合并配置、生命周期、组件注册、异步组件。\n\n**第四章：深入响应式原理**\n\n详细讲解了数据的变化如何驱动视图的变化，分析了响应式对象的创建，依赖收集、派发更新的实现过程，一些特殊情况的处理，并对比了计算属性和侦听属性的实现，最后分析了组件更新的过程。\n\n**第五章：编译**\n\n从编译的入口函数开始，分析了编译的三个核心流程的实现：`parse` -> `optimize` -> `codegen`。\n\n**第六章：扩展**\n\n详细讲解了 `event`、`v-model`、`slot`、`keep-alive`、`transition`、`transition-group` 等常用功能的原理实现，该章节作为一个可扩展章节，未来会分析更多 Vue 提供的特性。\n\n**第七章：Vue-Router**\n\n分析了 Vue-Router 的实现原理，从路由注册开始，分析了路由对象、`matcher`，并深入分析了整个路径切换的实现过程和细节。\n\n**第八章：Vuex**\n\n分析了 Vuex 的实现原理，深入分析了它的初始化过程，常用 API 以及插件部分的实现。\n\n\n" }, { "path": "docs/v2/compile/codegen.md", "content": "# codegen\n\n编译的最后一步就是把优化后的 AST 树转换成可执行的代码，这部分内容也比较多，我并不打算把所有的细节都讲了，了解整体流程即可。部分细节我们会在之后的章节配合一个具体 case 去详细讲。\n\n为了方便理解，我们还是用之前的例子：\n\n```html\n
    \n
  • {{item}}:{{index}}
    • \n
\n```\n\n它经过编译，执行 `const code = generate(ast, options)`，生成的 `render` 代码串如下：\n\n```js\nwith(this){\n return (isShow) ?\n _c('ul', {\n staticClass: \"list\",\n class: bindCls\n },\n _l((data), function(item, index) {\n return _c('li', {\n on: {\n \"click\": function($event) {\n clickItem(index)\n }\n }\n },\n [_v(_s(item) + \":\" + _s(index))])\n })\n ) : _e()\n}\n```\n\n这里的 `_c` 函数定义在 `src/core/instance/render.js` 中。\n\n```js\nvm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)\n```\n\n而 `_l`、`_v` 定义在 `src/core/instance/render-helpers/index.js` 中：\n\n```js\nexport function installRenderHelpers (target: any) {\n target._o = markOnce\n target._n = toNumber\n target._s = toString\n target._l = renderList\n target._t = renderSlot\n target._q = looseEqual\n target._i = looseIndexOf\n target._m = renderStatic\n target._f = resolveFilter\n target._k = checkKeyCodes\n target._b = bindObjectProps\n target._v = createTextVNode\n target._e = createEmptyVNode\n target._u = resolveScopedSlots\n target._g = bindObjectListeners\n}\n```\n顾名思义，`_c` 就是执行 `createElement` 去创建 VNode，而 `_l` 对应 `renderList` 渲染列表；`_v` 对应 `createTextVNode` 创建文本 VNode；`_e` 对于 `createEmptyVNode`创建空的 VNode。 \n\n在 `compileToFunctions` 中，会把这个 `render` 代码串转换成函数，它的定义在 `src/compler/to-function.js` 中：\n\n```js\nconst compiled = compile(template, options)\nres.render = createFunction(compiled.render, fnGenErrors)\n\nfunction createFunction (code, errors) {\n try {\n return new Function(code)\n } catch (err) {\n errors.push({ err, code })\n return noop\n }\n}\n```\n\n实际上就是把 `render` 代码串通过 `new Function` 的方式转换成可执行的函数，赋值给 `vm.options.render`，这样当组件通过 `vm._render` 的时候，就会执行这个 `render` 函数。那么接下来我们就重点关注一下这个 `render` 代码串的生成过程。\n\n## generate\n\n```js\nconst code = generate(ast, options)\n```\n\n`generate` 函数的定义在 `src/compiler/codegen/index.js` 中：\n\n```js\nexport function generate (\n ast: ASTElement | void,\n options: CompilerOptions\n): CodegenResult {\n const state = new CodegenState(options)\n const code = ast ? genElement(ast, state) : '_c(\"div\")'\n return {\n render: `with(this){return ${code}}`,\n staticRenderFns: state.staticRenderFns\n }\n}\n```\n\n`generate` 函数首先通过 `genElement(ast, state)` 生成 `code`，再把 `code` 用 `with(this){return ${code}}}` 包裹起来。这里的 `state` 是 `CodegenState` 的一个实例，稍后我们在用到它的时候会介绍它。先来看一下 `genElement`：\n\n```js\nexport function genElement (el: ASTElement, state: CodegenState): string {\n if (el.staticRoot && !el.staticProcessed) {\n return genStatic(el, state)\n } else if (el.once && !el.onceProcessed) {\n return genOnce(el, state)\n } else if (el.for && !el.forProcessed) {\n return genFor(el, state)\n } else if (el.if && !el.ifProcessed) {\n return genIf(el, state)\n } else if (el.tag === 'template' && !el.slotTarget) {\n return genChildren(el, state) || 'void 0'\n } else if (el.tag === 'slot') {\n return genSlot(el, state)\n } else {\n // component or element\n let code\n if (el.component) {\n code = genComponent(el.component, el, state)\n } else {\n const data = el.plain ? undefined : genData(el, state)\n\n const children = el.inlineTemplate ? null : genChildren(el, state, true)\n code = `_c('${el.tag}'${\n data ? `,${data}` : '' // data\n }${\n children ? `,${children}` : '' // children\n })`\n }\n // module transforms\n for (let i = 0; i < state.transforms.length; i++) {\n code = state.transforms[i](el, code)\n }\n return code\n }\n}\n```\n基本就是判断当前 AST 元素节点的属性执行不同的代码生成函数，在我们的例子中，我们先了解一下 `genFor` 和 `genIf`。\n\n## `genIf`\n\n```js\nexport function genIf (\n el: any,\n state: CodegenState,\n altGen?: Function,\n altEmpty?: string\n): string {\n el.ifProcessed = true // avoid recursion\n return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)\n}\n\nfunction genIfConditions (\n conditions: ASTIfConditions,\n state: CodegenState,\n altGen?: Function,\n altEmpty?: string\n): string {\n if (!conditions.length) {\n return altEmpty || '_e()'\n }\n\n const condition = conditions.shift()\n if (condition.exp) {\n return `(${condition.exp})?${\n genTernaryExp(condition.block)\n }:${\n genIfConditions(conditions, state, altGen, altEmpty)\n }`\n } else {\n return `${genTernaryExp(condition.block)}`\n }\n\n // v-if with v-once should generate code like (a)?_m(0):_m(1)\n function genTernaryExp (el) {\n return altGen\n ? altGen(el, state)\n : el.once\n ? genOnce(el, state)\n : genElement(el, state)\n }\n}\n```\n\n`genIf` 主要是通过执行 `genIfConditions`，它是依次从 `conditions` 获取第一个 `condition`，然后通过对 `condition.exp` 去生成一段三元运算符的代码，`:` 后是递归调用 `genIfConditions`，这样如果有多个 `conditions`，就生成多层三元运算逻辑。这里我们暂时不考虑 `v-once` 的情况，所以\n`genTernaryExp` 最终是调用了 `genElement`。\n\n在我们的例子中，只有一个 `condition`，`exp` 为 `isShow`，因此生成如下伪代码：\n\n```js\nreturn (isShow) ? genElement(el, state) : _e()\n```\n\n## `genFor`\n\n```js\nexport function genFor (\n el: any,\n state: CodegenState,\n altGen?: Function,\n altHelper?: string\n): string {\n const exp = el.for\n const alias = el.alias\n const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''\n const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''\n\n if (process.env.NODE_ENV !== 'production' &&\n state.maybeComponent(el) &&\n el.tag !== 'slot' &&\n el.tag !== 'template' &&\n !el.key\n ) {\n state.warn(\n `<${el.tag} v-for=\"${alias} in ${exp}\">: component lists rendered with ` +\n `v-for should have explicit keys. ` +\n `See https://vuejs.org/guide/list.html#key for more info.`,\n true /* tip */\n )\n }\n\n el.forProcessed = true // avoid recursion\n return `${altHelper || '_l'}((${exp}),` +\n `function(${alias}${iterator1}${iterator2}){` +\n `return ${(altGen || genElement)(el, state)}` +\n '})'\n}\n```\n\n`genFor` 的逻辑很简单，首先 AST 元素节点中获取了和 `for` 相关的一些属性，然后返回了一个代码字符串。\n\n在我们的例子中，`exp` 是 `data`，`alias` 是 `item`，`iterator1` ，因此生成如下伪代码：\n\n```js\n_l((data), function(item, index) {\n return genElememt(el, state)\n})\n```\n\n## `genData` & `genChildren`\n\n再次回顾我们的例子，它的最外层是 `ul`，首先执行 `genIf`，它最终调用了 `genElement(el, state)` 去生成子节点，注意，这里的 `el` 仍然指向的是 `ul` 对应的 AST 节点，但是此时的 `el.ifProcessed` 为 true，所以命中最后一个 else 逻辑：\n\n```js\n// component or element\nlet code\nif (el.component) {\n code = genComponent(el.component, el, state)\n} else {\n const data = el.plain ? undefined : genData(el, state)\n\n const children = el.inlineTemplate ? null : genChildren(el, state, true)\n code = `_c('${el.tag}'${\n data ? `,${data}` : '' // data\n }${\n children ? `,${children}` : '' // children\n })`\n}\n// module transforms\nfor (let i = 0; i < state.transforms.length; i++) {\n code = state.transforms[i](el, code)\n}\nreturn code\n```\n\n这里我们只关注 2 个逻辑，`genData` 和 `genChildren`：\n\n- genData\n\n```js\nexport function genData (el: ASTElement, state: CodegenState): string {\n let data = '{'\n\n // directives first.\n // directives may mutate the el's other properties before they are generated.\n const dirs = genDirectives(el, state)\n if (dirs) data += dirs + ','\n\n // key\n if (el.key) {\n data += `key:${el.key},`\n }\n // ref\n if (el.ref) {\n data += `ref:${el.ref},`\n }\n if (el.refInFor) {\n data += `refInFor:true,`\n }\n // pre\n if (el.pre) {\n data += `pre:true,`\n }\n // record original tag name for components using \"is\" attribute\n if (el.component) {\n data += `tag:\"${el.tag}\",`\n }\n // module data generation functions\n for (let i = 0; i < state.dataGenFns.length; i++) {\n data += state.dataGenFns[i](el)\n }\n // attributes\n if (el.attrs) {\n data += `attrs:{${genProps(el.attrs)}},`\n }\n // DOM props\n if (el.props) {\n data += `domProps:{${genProps(el.props)}},`\n }\n // event handlers\n if (el.events) {\n data += `${genHandlers(el.events, false, state.warn)},`\n }\n if (el.nativeEvents) {\n data += `${genHandlers(el.nativeEvents, true, state.warn)},`\n }\n // slot target\n // only for non-scoped slots\n if (el.slotTarget && !el.slotScope) {\n data += `slot:${el.slotTarget},`\n }\n // scoped slots\n if (el.scopedSlots) {\n data += `${genScopedSlots(el.scopedSlots, state)},`\n }\n // component v-model\n if (el.model) {\n data += `model:{value:${\n el.model.value\n },callback:${\n el.model.callback\n },expression:${\n el.model.expression\n }},`\n }\n // inline-template\n if (el.inlineTemplate) {\n const inlineTemplate = genInlineTemplate(el, state)\n if (inlineTemplate) {\n data += `${inlineTemplate},`\n }\n }\n data = data.replace(/,$/, '') + '}'\n // v-bind data wrap\n if (el.wrapData) {\n data = el.wrapData(data)\n }\n // v-on data wrap\n if (el.wrapListeners) {\n data = el.wrapListeners(data)\n }\n return data\n}\n```\n\n`genData` 函数就是根据 AST 元素节点的属性构造出一个 `data` 对象字符串，这个在后面创建 VNode 的时候的时候会作为参数传入。\n\n之前我们提到了 `CodegenState` 的实例 `state`，这里有一段关于 `state` 的逻辑：\n\n```js\nfor (let i = 0; i < state.dataGenFns.length; i++) {\n data += state.dataGenFns[i](el)\n}\n```\n\n`state.dataGenFns` 的初始化在它的构造器中。\n\n```js\nexport class CodegenState {\n constructor (options: CompilerOptions) {\n // ...\n this.dataGenFns = pluckModuleFunction(options.modules, 'genData')\n // ...\n }\n}\n```\n\n实际上就是获取所有 `modules` 中的 `genData` 函数，其中，`class module` 和 `style module` 定义了 `genData` 函数。比如定义在 `src/platforms/web/compiler/modules/class.js` 中的 `genData` 方法：\n\n```js\nfunction genData (el: ASTElement): string {\n let data = ''\n if (el.staticClass) {\n data += `staticClass:${el.staticClass},`\n }\n if (el.classBinding) {\n data += `class:${el.classBinding},`\n }\n return data\n}\n```\n\n在我们的例子中，`ul` AST 元素节点定义了 `el.staticClass` 和 `el.classBinding`，因此最终生成的 `data` 字符串如下：\n\n```js\n{\n staticClass: \"list\",\n class: bindCls\n}\n```\n\n- genChildren\n\n接下来我们再来看一下 `genChildren`，它的定义在 `src/compiler/codegen/index.js` 中：\n\n```js\nexport function genChildren (\n el: ASTElement,\n state: CodegenState,\n checkSkip?: boolean,\n altGenElement?: Function,\n altGenNode?: Function\n): string | void {\n const children = el.children\n if (children.length) {\n const el: any = children[0]\n if (children.length === 1 &&\n el.for &&\n el.tag !== 'template' &&\n el.tag !== 'slot'\n ) {\n return (altGenElement || genElement)(el, state)\n }\n const normalizationType = checkSkip\n ? getNormalizationType(children, state.maybeComponent)\n : 0\n const gen = altGenNode || genNode\n return `[${children.map(c => gen(c, state)).join(',')}]${\n normalizationType ? `,${normalizationType}` : ''\n }`\n }\n}\n```\n\n在我们的例子中，`li` AST 元素节点是 `ul` AST 元素节点的 `children` 之一，满足 `(children.length === 1 && el.for && el.tag !== 'template' && el.tag !== 'slot')` 条件，因此通过 `genElement(el, state)` 生成 `li` AST元素节点的代码，也就回到了我们之前调用 `genFor` 生成的代码，把它们拼在一起生成的伪代码如下：\n\n```js\nreturn (isShow) ?\n _c('ul', {\n staticClass: \"list\",\n class: bindCls\n },\n _l((data), function(item, index) {\n return genElememt(el, state)\n })\n ) : _e()\n```\n\n在我们的例子中，在执行 `genElememt(el, state)` 的时候，`el` 还是 `li` AST 元素节点，`el.forProcessed` 已为 true，所以会继续执行 `genData` 和 `genChildren` 的逻辑。由于 `el.events` 不为空，在执行 `genData` 的时候，会执行 如下逻辑：\n\n```js\nif (el.events) {\n data += `${genHandlers(el.events, false, state.warn)},`\n}\n```\n\n`genHandlers` 的定义在 `src/compiler/codegen/events.js` 中：\n\n```js\nexport function genHandlers (\n events: ASTElementHandlers,\n isNative: boolean,\n warn: Function\n): string {\n let res = isNative ? 'nativeOn:{' : 'on:{'\n for (const name in events) {\n res += `\"${name}\":${genHandler(name, events[name])},`\n }\n return res.slice(0, -1) + '}'\n}\n```\n`genHandler` 的逻辑就不介绍了，很大部分都是对修饰符 `modifier` 的处理，感兴趣同学可以自己看，对于我们的例子，它最终 `genData` 生成的 `data` 字符串如下：\n\n```js\n{\n on: {\n \"click\": function($event) {\n clickItem(index)\n }\n }\n}\n```\n\n`genChildren` 的时候，会执行到如下逻辑：\n\n```js\nexport function genChildren (\n el: ASTElement,\n state: CodegenState,\n checkSkip?: boolean,\n altGenElement?: Function,\n altGenNode?: Function\n): string | void {\n // ...\n const normalizationType = checkSkip\n ? getNormalizationType(children, state.maybeComponent)\n : 0\n const gen = altGenNode || genNode\n return `[${children.map(c => gen(c, state)).join(',')}]${\n normalizationType ? `,${normalizationType}` : ''\n }`\n}\n\nfunction genNode (node: ASTNode, state: CodegenState): string {\n if (node.type === 1) {\n return genElement(node, state)\n } if (node.type === 3 && node.isComment) {\n return genComment(node)\n } else {\n return genText(node)\n }\n}\n```\n`genChildren` 的就是遍历 `children`，然后执行 `genNode` 方法，根据不同的 `type` 执行具体的方法。在我们的例子中，`li` AST 元素节点的 `children` 是 type 为 2 的表达式 AST 元素节点，那么会执行到 `genText(node)` 逻辑。\n\n```js\nexport function genText (text: ASTText | ASTExpression): string {\n return `_v(${text.type === 2\n ? text.expression\n : transformSpecialNewlines(JSON.stringify(text.text))\n })`\n}\n```\n\n因此在我们的例子中，`genChildren` 生成的代码串如下：\n\n```js\n[_v(_s(item) + \":\" + _s(index))]\n```\n\n和之前拼在一起，最终生成的 `code` 如下：\n\n```js\n return (isShow) ?\n _c('ul', {\n staticClass: \"list\",\n class: bindCls\n },\n _l((data), function(item, index) {\n return _c('li', {\n on: {\n \"click\": function($event) {\n clickItem(index)\n }\n }\n },\n [_v(_s(item) + \":\" + _s(index))])\n })\n ) : _e()\n```\n\n## 总结\n\n这一节通过例子配合解析，我们对从 `ast -> code ` 这一步有了一些了解，编译后生成的代码就是在运行时执行的代码。由于 `genCode` 的内容有很多，所以我对大家的建议是没必要把所有的细节都一次性看完，我们应该根据具体一个 case，走完一条主线即可。\n\n在之后的章节我们会对 `slot` 的实现做解析，我们会重新复习编译的章节，针对具体问题做具体分析，有利于我们排除干扰，对编译过程的学习有更深入的理解。\n" }, { "path": "docs/v2/compile/entrance.md", "content": "# 编译入口\n\n当我们使用 Runtime + Compiler 的 Vue.js，它的入口是 `src/platforms/web/entry-runtime-with-compiler.js`，看一下它对 `$mount` 函数的定义：\n\n```js\nconst mount = Vue.prototype.$mount\nVue.prototype.$mount = function (\n el?: string | Element,\n hydrating?: boolean\n): Component {\n el = el && query(el)\n\n /* istanbul ignore if */\n if (el === document.body || el === document.documentElement) {\n process.env.NODE_ENV !== 'production' && warn(\n `Do not mount Vue to or - mount to normal elements instead.`\n )\n return this\n }\n\n const options = this.$options\n // resolve template/el and convert to render function\n if (!options.render) {\n let template = options.template\n if (template) {\n if (typeof template === 'string') {\n if (template.charAt(0) === '#') {\n template = idToTemplate(template)\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && !template) {\n warn(\n `Template element not found or is empty: ${options.template}`,\n this\n )\n }\n }\n } else if (template.nodeType) {\n template = template.innerHTML\n } else {\n if (process.env.NODE_ENV !== 'production') {\n warn('invalid template option:' + template, this)\n }\n return this\n }\n } else if (el) {\n template = getOuterHTML(el)\n }\n if (template) {\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && config.performance && mark) {\n mark('compile')\n }\n\n const { render, staticRenderFns } = compileToFunctions(template, {\n shouldDecodeNewlines,\n shouldDecodeNewlinesForHref,\n delimiters: options.delimiters,\n comments: options.comments\n }, this)\n options.render = render\n options.staticRenderFns = staticRenderFns\n\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && config.performance && mark) {\n mark('compile end')\n measure(`vue ${this._name} compile`, 'compile', 'compile end')\n }\n }\n }\n return mount.call(this, el, hydrating)\n}\n```\n\n这段函数逻辑之前分析过，关于编译的入口就是在这里：\n\n```js\nconst { render, staticRenderFns } = compileToFunctions(template, {\n shouldDecodeNewlines,\n shouldDecodeNewlinesForHref,\n delimiters: options.delimiters,\n comments: options.comments\n }, this)\noptions.render = render\noptions.staticRenderFns = staticRenderFns\n```\n\n`compileToFunctions` 方法就是把模板 `template` 编译生成 `render` 以及 `staticRenderFns`，它的定义在 `src/platforms/web/compiler/index.js` 中：\n\n```js\nimport { baseOptions } from './options'\nimport { createCompiler } from 'compiler/index'\n\nconst { compile, compileToFunctions } = createCompiler(baseOptions)\n\nexport { compile, compileToFunctions }\n```\n可以看到 `compileToFunctions` 方法实际上是 `createCompiler` 方法的返回值，该方法接收一个编译配置参数，接下来我们来看一下 `createCompiler` 方法的定义，在 `src/compiler/index.js` 中：\n\n```js\n// `createCompilerCreator` allows creating compilers that use alternative\n// parser/optimizer/codegen, e.g the SSR optimizing compiler.\n// Here we just export a default compiler using the default parts.\nexport const createCompiler = createCompilerCreator(function baseCompile (\n template: string,\n options: CompilerOptions\n): CompiledResult {\n const ast = parse(template.trim(), options)\n if (options.optimize !== false) {\n optimize(ast, options)\n }\n const code = generate(ast, options)\n return {\n ast,\n render: code.render,\n staticRenderFns: code.staticRenderFns\n }\n})\n```\n\n`createCompiler` 方法实际上是通过调用 `createCompilerCreator` 方法返回的，该方法传入的参数是一个函数，真正的编译过程都在这个 `baseCompile` 函数里执行，那么 `createCompilerCreator` 又是什么呢，它的定义在 `src/compiler/create-compiler.js` 中：\n\n```js\nexport function createCompilerCreator (baseCompile: Function): Function {\n return function createCompiler (baseOptions: CompilerOptions) {\n function compile (\n template: string,\n options?: CompilerOptions\n ): CompiledResult {\n const finalOptions = Object.create(baseOptions)\n const errors = []\n const tips = []\n finalOptions.warn = (msg, tip) => {\n (tip ? tips : errors).push(msg)\n }\n\n if (options) {\n // merge custom modules\n if (options.modules) {\n finalOptions.modules =\n (baseOptions.modules || []).concat(options.modules)\n }\n // merge custom directives\n if (options.directives) {\n finalOptions.directives = extend(\n Object.create(baseOptions.directives || null),\n options.directives\n )\n }\n // copy other options\n for (const key in options) {\n if (key !== 'modules' && key !== 'directives') {\n finalOptions[key] = options[key]\n }\n }\n }\n\n const compiled = baseCompile(template, finalOptions)\n if (process.env.NODE_ENV !== 'production') {\n errors.push.apply(errors, detectErrors(compiled.ast))\n }\n compiled.errors = errors\n compiled.tips = tips\n return compiled\n }\n\n return {\n compile,\n compileToFunctions: createCompileToFunctionFn(compile)\n }\n }\n}\n```\n\n可以看到该方法返回了一个 `createCompiler` 的函数，它接收一个 `baseOptions` 的参数，返回的是一个对象，包括 `compile` 方法属性和 `compileToFunctions` 属性，这个 `compileToFunctions` 对应的就是 `$mount` 函数调用的 `compileToFunctions` 方法，它是调用 `createCompileToFunctionFn` 方法的返回值，我们接下来看一下 `createCompileToFunctionFn` 方法，它的定义在 `src/compiler/to-function/js` 中：\n\n```js\nexport function createCompileToFunctionFn (compile: Function): Function {\n const cache = Object.create(null)\n\n return function compileToFunctions (\n template: string,\n options?: CompilerOptions,\n vm?: Component\n ): CompiledFunctionResult {\n options = extend({}, options)\n const warn = options.warn || baseWarn\n delete options.warn\n\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production') {\n // detect possible CSP restriction\n try {\n new Function('return 1')\n } catch (e) {\n if (e.toString().match(/unsafe-eval|CSP/)) {\n warn(\n 'It seems you are using the standalone build of Vue.js in an ' +\n 'environment with Content Security Policy that prohibits unsafe-eval. ' +\n 'The template compiler cannot work in this environment. Consider ' +\n 'relaxing the policy to allow unsafe-eval or pre-compiling your ' +\n 'templates into render functions.'\n )\n }\n }\n }\n\n // check cache\n const key = options.delimiters\n ? String(options.delimiters) + template\n : template\n if (cache[key]) {\n return cache[key]\n }\n\n // compile\n const compiled = compile(template, options)\n\n // check compilation errors/tips\n if (process.env.NODE_ENV !== 'production') {\n if (compiled.errors && compiled.errors.length) {\n warn(\n `Error compiling template:\\n\\n${template}\\n\\n` +\n compiled.errors.map(e => `- ${e}`).join('\\n') + '\\n',\n vm\n )\n }\n if (compiled.tips && compiled.tips.length) {\n compiled.tips.forEach(msg => tip(msg, vm))\n }\n }\n\n // turn code into functions\n const res = {}\n const fnGenErrors = []\n res.render = createFunction(compiled.render, fnGenErrors)\n res.staticRenderFns = compiled.staticRenderFns.map(code => {\n return createFunction(code, fnGenErrors)\n })\n\n // check function generation errors.\n // this should only happen if there is a bug in the compiler itself.\n // mostly for codegen development use\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production') {\n if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {\n warn(\n `Failed to generate render function:\\n\\n` +\n fnGenErrors.map(({ err, code }) => `${err.toString()} in\\n\\n${code}\\n`).join('\\n'),\n vm\n )\n }\n }\n\n return (cache[key] = res)\n }\n}\n```\n\n至此我们总算找到了 `compileToFunctions` 的最终定义，它接收 3 个参数、编译模板 `template`，编译配置 `options` 和 Vue 实例 `vm`。核心的编译过程就一行代码：\n\n```js\nconst compiled = compile(template, options)\n```\n\n`compile` 函数在执行 `createCompileToFunctionFn` 的时候作为参数传入，它是 `createCompiler` 函数中定义的 `compile` 函数，如下：\n\n```js\nfunction compile (\n template: string,\n options?: CompilerOptions\n): CompiledResult {\n const finalOptions = Object.create(baseOptions)\n const errors = []\n const tips = []\n finalOptions.warn = (msg, tip) => {\n (tip ? tips : errors).push(msg)\n }\n\n if (options) {\n // merge custom modules\n if (options.modules) {\n finalOptions.modules =\n (baseOptions.modules || []).concat(options.modules)\n }\n // merge custom directives\n if (options.directives) {\n finalOptions.directives = extend(\n Object.create(baseOptions.directives || null),\n options.directives\n )\n }\n // copy other options\n for (const key in options) {\n if (key !== 'modules' && key !== 'directives') {\n finalOptions[key] = options[key]\n }\n }\n }\n\n const compiled = baseCompile(template, finalOptions)\n if (process.env.NODE_ENV !== 'production') {\n errors.push.apply(errors, detectErrors(compiled.ast))\n }\n compiled.errors = errors\n compiled.tips = tips\n return compiled\n}\n```\n\n`compile` 函数执行的逻辑是先处理配置参数，真正执行编译过程就一行代码：\n\n```js\nconst compiled = baseCompile(template, finalOptions)\n```\n\n`baseCompile` 在执行 `createCompilerCreator` 方法时作为参数传入，如下：\n\n````js\nexport const createCompiler = createCompilerCreator(function baseCompile (\n template: string,\n options: CompilerOptions\n): CompiledResult {\n const ast = parse(template.trim(), options)\n optimize(ast, options)\n const code = generate(ast, options)\n return {\n ast,\n render: code.render,\n staticRenderFns: code.staticRenderFns\n }\n})\n````\n\n所以编译的入口我们终于找到了，它主要就是执行了如下几个逻辑：\n\n- 解析模板字符串生成 AST\n\n```js\nconst ast = parse(template.trim(), options)\n```\n\n- 优化语法树\n\n```js\noptimize(ast, options)\n```\n\n- 生成代码\n\n```js\nconst code = generate(ast, options)\n```\n\n那么接下来的章节我会带大家去逐步分析这几个过程。\n \n## 总结\n\n编译入口逻辑之所以这么绕，是因为 Vue.js 在不同的平台下都会有编译的过程，因此编译过程中的依赖的配置 `baseOptions` 会有所不同。而编译过程会多次执行，但这同一个平台下每一次的编译过程配置又是相同的，为了不让这些配置在每次编译过程都通过参数传入，Vue.js 利用了函数柯里化的技巧很好的实现了 `baseOptions` 的参数保留。同样，Vue.js 也是利用函数柯里化技巧把基础的编译过程函数抽出来，通过 `createCompilerCreator(baseCompile)` 的方式把真正编译的过程和其它逻辑如对编译配置处理、缓存处理等剥离开，这样的设计还是非常巧妙的。" }, { "path": "docs/v2/compile/index.md", "content": "# 编译\n\n之前我们分析过模板到真实 DOM 渲染的过程，中间有一个环节是把模板编译成 `render` 函数，这个过程我们把它称作编译。\n\n虽然我们可以直接为组件编写 `render` 函数，但是编写 `template` 模板更加直观，也更符合我们的开发习惯。\n\nVue.js 提供了 2 个版本，一个是 Runtime + Compiler 的，一个是 Runtime only 的，前者是包含编译代码的，可以把编译过程放在运行时做，后者是不包含编译代码的，需要借助 webpack 的 `vue-loader` 事先把模板编译成 `render `函数。\n\n这一章我们就来分析编译的过程，对编译过程的了解会让我们对 Vue 的指令、内置组件等有更好的理解。不过由于编译的过程是一个相对复杂的过程，我们只要求理解整体的流程、输入和输出即可，对于细节我们不必抠太细。有些细节比如对于 `slot` 的处理我们可以在之后去分析插槽实现的时候再详细分析。" }, { "path": "docs/v2/compile/optimize.md", "content": "# optimize\n\n当我们的模板 `template` 经过 `parse` 过程后，会输出生成 AST 树，那么接下来我们需要对这颗树做优化，`optimize` 的逻辑是远简单于 `parse` 的逻辑，所以理解起来会轻松很多。\n\n为什么要有优化过程，因为我们知道 Vue 是数据驱动，是响应式的，但是我们的模板并不是所有数据都是响应式的，也有很多数据是首次渲染后就永远不会变化的，那么这部分数据生成的 DOM 也不会变化，我们可以在 `patch` 的过程跳过对他们的比对。\n\n来看一下 `optimize` 方法的定义，在 `src/compiler/optimizer.js` 中：\n\n```js\n/**\n * Goal of the optimizer: walk the generated template AST tree\n * and detect sub-trees that are purely static, i.e. parts of\n * the DOM that never needs to change.\n *\n * Once we detect these sub-trees, we can:\n *\n * 1. Hoist them into constants, so that we no longer need to\n * create fresh nodes for them on each re-render;\n * 2. Completely skip them in the patching process.\n */\nexport function optimize (root: ?ASTElement, options: CompilerOptions) {\n if (!root) return\n isStaticKey = genStaticKeysCached(options.staticKeys || '')\n isPlatformReservedTag = options.isReservedTag || no\n // first pass: mark all non-static nodes.\n markStatic(root)\n // second pass: mark static roots.\n markStaticRoots(root, false)\n}\n\nfunction genStaticKeys (keys: string): Function {\n return makeMap(\n 'type,tag,attrsList,attrsMap,plain,parent,children,attrs' +\n (keys ? ',' + keys : '')\n )\n}\n```\n\n我们在编译阶段可以把一些 AST 节点优化成静态节点，所以整个 `optimize` 的过程实际上就干 2 件事情，`markStatic(root)` 标记静态节点 ，`markStaticRoots(root, false)` 标记静态根。\n\n## 标记静态节点\n\n```js\nfunction markStatic (node: ASTNode) {\n node.static = isStatic(node)\n if (node.type === 1) {\n // do not make component slot content static. this avoids\n // 1. components not able to mutate slot nodes\n // 2. static slot content fails for hot-reloading\n if (\n !isPlatformReservedTag(node.tag) &&\n node.tag !== 'slot' &&\n node.attrsMap['inline-template'] == null\n ) {\n return\n }\n for (let i = 0, l = node.children.length; i < l; i++) {\n const child = node.children[i]\n markStatic(child)\n if (!child.static) {\n node.static = false\n }\n }\n if (node.ifConditions) {\n for (let i = 1, l = node.ifConditions.length; i < l; i++) {\n const block = node.ifConditions[i].block\n markStatic(block)\n if (!block.static) {\n node.static = false\n }\n }\n }\n }\n}\n\nfunction isStatic (node: ASTNode): boolean {\n if (node.type === 2) { // expression\n return false\n }\n if (node.type === 3) { // text\n return true\n }\n return !!(node.pre || (\n !node.hasBindings && // no dynamic bindings\n !node.if && !node.for && // not v-if or v-for or v-else\n !isBuiltInTag(node.tag) && // not a built-in\n isPlatformReservedTag(node.tag) && // not a component\n !isDirectChildOfTemplateFor(node) &&\n Object.keys(node).every(isStaticKey)\n ))\n}\n```\n\n首先执行 `node.static = isStatic(node)`\n\n`isStatic` 是对一个 AST 元素节点是否是静态的判断，如果是表达式，就是非静态；如果是纯文本，就是静态；对于一个普通元素，如果有 pre 属性，那么它使用了 `v-pre` 指令，是静态，否则要同时满足以下条件：没有使用 `v-if`、`v-for`，没有使用其它指令（不包括 `v-once`），非内置组件，是平台保留的标签，非带有 `v-for` 的 `template` 标签的直接子节点，节点的所有属性的 `key` 都满足静态 key；这些都满足则这个 AST 节点是一个静态节点。\n\n如果这个节点是一个普通元素，则遍历它的所有 `children`，递归执行 `markStatic`。因为所有的 `elseif` 和 `else` 节点都不在 `children` 中， 如果节点的 `ifConditions` 不为空，则遍历 `ifConditions` 拿到所有条件中的 `block`，也就是它们对应的 AST 节点，递归执行 `markStatic`。在这些递归过程中，一旦子节点有不是 `static` 的情况，则它的父节点的 `static` 均变成 false。\n\n## 标记静态根\n\n```js\nfunction markStaticRoots (node: ASTNode, isInFor: boolean) {\n if (node.type === 1) {\n if (node.static || node.once) {\n node.staticInFor = isInFor\n }\n // For a node to qualify as a static root, it should have children that\n // are not just static text. Otherwise the cost of hoisting out will\n // outweigh the benefits and it's better off to just always render it fresh.\n if (node.static && node.children.length && !(\n node.children.length === 1 &&\n node.children[0].type === 3\n )) {\n node.staticRoot = true\n return\n } else {\n node.staticRoot = false\n }\n if (node.children) {\n for (let i = 0, l = node.children.length; i < l; i++) {\n markStaticRoots(node.children[i], isInFor || !!node.for)\n }\n }\n if (node.ifConditions) {\n for (let i = 1, l = node.ifConditions.length; i < l; i++) {\n markStaticRoots(node.ifConditions[i].block, isInFor)\n }\n }\n }\n}\n```\n\n`markStaticRoots` 第二个参数是 `isInFor`，对于已经是 `static` 的节点或者是 `v-once` 指令的节点，`node.staticInFor = isInFor`。\n接着就是对于 `staticRoot` 的判断逻辑，从注释中我们可以看到，对于有资格成为 `staticRoot` 的节点，除了本身是一个静态节点外，必须满足拥有 `children`，并且 `children` 不能只是一个文本节点，不然的话把它标记成静态根节点的收益就很小了。\n\n接下来和标记静态节点的逻辑一样，遍历 `children` 以及 `ifConditions`，递归执行 `markStaticRoots`。\n\n回归我们之前的例子，经过 `optimize` 后，AST 树变成了如下：\n\n```js\nast = {\n 'type': 1,\n 'tag': 'ul',\n 'attrsList': [],\n 'attrsMap': {\n ':class': 'bindCls',\n 'class': 'list',\n 'v-if': 'isShow'\n },\n 'if': 'isShow',\n 'ifConditions': [{\n 'exp': 'isShow',\n 'block': // ul ast element\n }],\n 'parent': undefined,\n 'plain': false,\n 'staticClass': 'list',\n 'classBinding': 'bindCls',\n 'static': false,\n 'staticRoot': false,\n 'children': [{\n 'type': 1,\n 'tag': 'li',\n 'attrsList': [{\n 'name': '@click',\n 'value': 'clickItem(index)'\n }],\n 'attrsMap': {\n '@click': 'clickItem(index)',\n 'v-for': '(item,index) in data'\n },\n 'parent': // ul ast element\n 'plain': false,\n 'events': {\n 'click': {\n 'value': 'clickItem(index)'\n }\n },\n 'hasBindings': true,\n 'for': 'data',\n 'alias': 'item',\n 'iterator1': 'index',\n 'static': false,\n 'staticRoot': false,\n 'children': [\n 'type': 2,\n 'expression': '_s(item)+\":\"+_s(index)'\n 'text': '{{item}}:{{index}}',\n 'tokens': [\n {'@binding':'item'},\n ':',\n {'@binding':'index'}\n ],\n 'static': false\n ]\n }]\n}\n```\n\n我们发现每一个 AST 元素节点都多了 `staic` 属性，并且 `type` 为 1 的普通元素 AST 节点多了 `staticRoot` 属性。\n\n## 总结\n\n那么至此我们分析完了 `optimize` 的过程，就是深度遍历这个 AST 树，去检测它的每一颗子树是不是静态节点，如果是静态节点则它们生成 DOM 永远不需要改变，这对运行时对模板的更新起到极大的优化作用。\n\n我们通过 `optimize` 我们把整个 AST 树中的每一个 AST 元素节点标记了 `static` 和 `staticRoot`，它会影响我们接下来执行代码生成的过程。" }, { "path": "docs/v2/compile/parse.md", "content": "# parse\n\n编译过程首先就是对模板做解析，生成 AST，它是一种抽象语法树，是对源代码的抽象语法结构的树状表现形式。在很多编译技术中，如 babel 编译 ES6 的代码都会先生成 AST。\n\n这个过程是比较复杂的，它会用到大量正则表达式对字符串解析，如果对正则不是很了解，建议先去补习正则表达式的知识。为了直观地演示 `parse` 的过程，我们先来看一个例子：\n\n```html\n
    \n
  • {{item}}:{{index}}
    • \n
\n```\n\n经过 `parse` 过程后，生成的 AST 如下：\n\n```js\nast = {\n 'type': 1,\n 'tag': 'ul',\n 'attrsList': [],\n 'attrsMap': {\n ':class': 'bindCls',\n 'class': 'list',\n 'v-if': 'isShow'\n },\n 'if': 'isShow',\n 'ifConditions': [{\n 'exp': 'isShow',\n 'block': // ul ast element\n }],\n 'parent': undefined,\n 'plain': false,\n 'staticClass': 'list',\n 'classBinding': 'bindCls',\n 'children': [{\n 'type': 1,\n 'tag': 'li',\n 'attrsList': [{\n 'name': '@click',\n 'value': 'clickItem(index)'\n }],\n 'attrsMap': {\n '@click': 'clickItem(index)',\n 'v-for': '(item,index) in data'\n },\n 'parent': // ul ast element\n 'plain': false,\n 'events': {\n 'click': {\n 'value': 'clickItem(index)'\n }\n },\n 'hasBindings': true,\n 'for': 'data',\n 'alias': 'item',\n 'iterator1': 'index',\n 'children': [\n 'type': 2,\n 'expression': '_s(item)+\":\"+_s(index)'\n 'text': '{{item}}:{{index}}',\n 'tokens': [\n {'@binding':'item'},\n ':',\n {'@binding':'index'}\n ]\n ]\n }]\n}\n```\n\n可以看到，生成的 AST 是一个树状结构，每一个节点都是一个 `ast element`，除了它自身的一些属性，还维护了它的父子关系，如 `parent` 指向它的父节点，`children` 指向它的所有子节点。先对 AST 有一些直观的印象，那么接下来我们来分析一下这个 AST 是如何得到的。\n\n## 整体流程\n\n首先来看一下 `parse` 的定义，在 `src/compiler/parser/index.js` 中：\n\n```js\nexport function parse (\n template: string,\n options: CompilerOptions\n): ASTElement | void {\n getFnsAndConfigFromOptions(options)\n\n parseHTML(template, {\n // options ...\n start (tag, attrs, unary) {\n let element = createASTElement(tag, attrs)\n processElement(element)\n treeManagement()\n },\n\n end () {\n treeManagement()\n closeElement()\n },\n\n chars (text: string) {\n handleText()\n createChildrenASTOfText()\n },\n comment (text: string) {\n createChildrenASTOfComment()\n }\n })\n return astRootElement\n}\n```\n\n`parse` 函数的代码很长，贴一遍对同学的理解没有好处，我先把它拆成伪代码的形式，方便同学们对整体流程先有一个大致的了解。接下来我们就来分解分析每段伪代码的作用。\n\n### 从 options 中获取方法和配置\n\n对应伪代码：\n\n```js\ngetFnsAndConfigFromOptions(options)\n```\n\n`parse` 函数的输入是 `template` 和 `options`，输出是 AST 的根节点。`template` 就是我们的模板字符串，而 `options` 实际上是和平台相关的一些配置，它的定义在 `src/platforms/web/compiler/options` 中：\n\n```js\nimport {\n isPreTag,\n mustUseProp,\n isReservedTag,\n getTagNamespace\n} from '../util/index'\n\nimport modules from './modules/index'\nimport directives from './directives/index'\nimport { genStaticKeys } from 'shared/util'\nimport { isUnaryTag, canBeLeftOpenTag } from './util'\n\nexport const baseOptions: CompilerOptions = {\n expectHTML: true,\n modules,\n directives,\n isPreTag,\n isUnaryTag,\n mustUseProp,\n canBeLeftOpenTag,\n isReservedTag,\n getTagNamespace,\n staticKeys: genStaticKeys(modules)\n}\n```\n这些属性和方法之所以放到 `platforms` 目录下是因为它们在不同的平台（web 和 weex）的实现是不同的。\n\n我们用伪代码 `getFnsAndConfigFromOptions` 表示了这一过程，它的实际代码如下：\n\n```js\nwarn = options.warn || baseWarn\n\nplatformIsPreTag = options.isPreTag || no\nplatformMustUseProp = options.mustUseProp || no\nplatformGetTagNamespace = options.getTagNamespace || no\n\ntransforms = pluckModuleFunction(options.modules, 'transformNode')\npreTransforms = pluckModuleFunction(options.modules, 'preTransformNode')\npostTransforms = pluckModuleFunction(options.modules, 'postTransformNode')\n\ndelimiters = options.delimiters\n```\n\n这些方法和配置都是后续解析时候需要的，可以不用去管它们的具体作用，我们先往后看。\n\n### 解析 HTML 模板\n\n对应伪代码：\n\n```js\nparseHTML(template, options)\n```\n\n对于 `template` 模板的解析主要是通过 `parseHTML` 函数，它的定义在 `src/compiler/parser/html-parser` 中：\n\n```js\nexport function parseHTML (html, options) {\n let lastTag\n while (html) {\n if (!lastTag || !isPlainTextElement(lastTag)){\n let textEnd = html.indexOf('<')\n if (textEnd === 0) {\n if(matchComment) {\n advance(commentLength)\n continue\n }\n if(matchDoctype) {\n advance(doctypeLength)\n continue\n }\n if(matchEndTag) {\n advance(endTagLength)\n parseEndTag()\n continue\n }\n if(matchStartTag) {\n parseStartTag()\n handleStartTag()\n continue\n }\n }\n handleText()\n advance(textLength)\n } else {\n handlePlainTextElement()\n parseEndTag()\n }\n }\n}\n```\n由于 `parseHTML` 的逻辑也非常复杂，因此我也用了伪代码的方式表达，整体来说它的逻辑就是循环解析 `template` ，用正则做各种匹配，对于不同情况分别进行不同的处理，直到整个 template 被解析完毕。\n在匹配的过程中会利用 `advance` 函数不断前进整个模板字符串，直到字符串末尾。\n\n```js\nfunction advance (n) {\n index += n\n html = html.substring(n)\n}\n```\n\n为了更加直观地说明 `advance` 的作用，可以通过一副图表示：\n\n\n\n调用 `advance` 函数：\n\n```js\nadvance(4)\n```\n\n得到结果：\n\n\n\n\n\n匹配的过程中主要利用了正则表达式，如下：\n\n```js\nconst attribute = /^\\s*([^\\s\"'<>\\/=]+)(?:\\s*(=)\\s*(?:\"([^\"]*)\"+|'([^']*)'+|([^\\s\"'=<>`]+)))?/\nconst ncname = '[a-zA-Z_][\\\\w\\\\-\\\\.]*'\nconst qnameCapture = `((?:${ncname}\\\\:)?${ncname})`\nconst startTagOpen = new RegExp(`^<${qnameCapture}`)\nconst startTagClose = /^\\s*(\\/?)>/\nconst endTag = new RegExp(`^<\\\\/${qnameCapture}[^>]*>`)\nconst doctype = /^]+>/i\nconst comment = /^')\n\n if (commentEnd >= 0) {\n if (options.shouldKeepComment) {\n options.comment(html.substring(4, commentEnd))\n }\n advance(commentEnd + 3)\n continue\n }\n}\n\nif (conditionalComment.test(html)) {\n const conditionalEnd = html.indexOf(']>')\n\n if (conditionalEnd >= 0) {\n advance(conditionalEnd + 2)\n continue\n }\n}\n\nconst doctypeMatch = html.match(doctype)\nif (doctypeMatch) {\n advance(doctypeMatch[0].length)\n continue\n}\n```\n\n对于注释和条件注释节点，前进至它们的末尾位置；对于文档类型节点，则前进它自身长度的距离。\n\n- 开始标签\n\n```js\nconst startTagMatch = parseStartTag()\nif (startTagMatch) {\n handleStartTag(startTagMatch)\n if (shouldIgnoreFirstNewline(lastTag, html)) {\n advance(1)\n }\n continue\n}\n```\n\n首先通过 `parseStartTag` 解析开始标签：\n\n```js\nfunction parseStartTag () {\n const start = html.match(startTagOpen)\n if (start) {\n const match = {\n tagName: start[1],\n attrs: [],\n start: index\n }\n advance(start[0].length)\n let end, attr\n while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {\n advance(attr[0].length)\n match.attrs.push(attr)\n }\n if (end) {\n match.unarySlash = end[1]\n advance(end[0].length)\n match.end = index\n return match\n }\n }\n}\n```\n对于开始标签，除了标签名之外，还有一些标签相关的属性。函数先通过正则表达式 `startTagOpen` 匹配到开始标签，然后定义了 `match` 对象，接着循环去匹配开始标签中的属性并添加到 `match.attrs` 中，直到匹配的开始标签的闭合符结束。如果匹配到闭合符，则获取一元斜线符，前进到闭合符尾，并把当前索引赋值给 `match.end`。\n\n`parseStartTag` 对开始标签解析拿到 `match` 后，紧接着会执行 `handleStartTag` 对 `match` 做处理：\n\n```js\nfunction handleStartTag (match) {\n const tagName = match.tagName\n const unarySlash = match.unarySlash\n \n if (expectHTML) {\n if (lastTag === 'p' && isNonPhrasingTag(tagName)) {\n parseEndTag(lastTag)\n }\n if (canBeLeftOpenTag(tagName) && lastTag === tagName) {\n parseEndTag(tagName)\n }\n }\n \n const unary = isUnaryTag(tagName) || !!unarySlash\n \n const l = match.attrs.length\n const attrs = new Array(l)\n for (let i = 0; i < l; i++) {\n const args = match.attrs[i]\n if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('\"\"') === -1) {\n if (args[3] === '') { delete args[3] }\n if (args[4] === '') { delete args[4] }\n if (args[5] === '') { delete args[5] }\n }\n const value = args[3] || args[4] || args[5] || ''\n const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'\n ? options.shouldDecodeNewlinesForHref\n : options.shouldDecodeNewlines\n attrs[i] = {\n name: args[1],\n value: decodeAttr(value, shouldDecodeNewlines)\n }\n }\n \n if (!unary) {\n stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs })\n lastTag = tagName\n }\n \n if (options.start) {\n options.start(tagName, attrs, unary, match.start, match.end)\n }\n}\n```\n\n`handleStartTag` 的核心逻辑很简单，先判断开始标签是否是一元标签，类似 `、
` 这样，接着对 `match.attrs` 遍历并做了一些处理，最后判断如果非一元标签，则往 `stack` 里 push 一个对象，并且把 `tagName` 赋值给 `lastTag`。至于 `stack` 的作用，稍后我会介绍。\n\n最后调用了 `options.start` 回调函数，并传入一些参数，这个回调函数的作用稍后我会详细介绍。\n \n- 闭合标签\n\n```js\nconst endTagMatch = html.match(endTag)\nif (endTagMatch) {\n const curIndex = index\n advance(endTagMatch[0].length)\n parseEndTag(endTagMatch[1], curIndex, index)\n continue\n}\n```\n\n先通过正则 `endTag` 匹配到闭合标签，然后前进到闭合标签末尾，然后执行 `parseEndTag` 方法对闭合标签做解析。\n\n```js\n\nfunction parseEndTag (tagName, start, end) {\n let pos, lowerCasedTagName\n if (start == null) start = index\n if (end == null) end = index\n \n if (tagName) {\n lowerCasedTagName = tagName.toLowerCase()\n }\n \n if (tagName) {\n for (pos = stack.length - 1; pos >= 0; pos--) {\n if (stack[pos].lowerCasedTag === lowerCasedTagName) {\n break\n }\n }\n } else {\n pos = 0\n }\n \n if (pos >= 0) {\n for (let i = stack.length - 1; i >= pos; i--) {\n if (process.env.NODE_ENV !== 'production' &&\n (i > pos || !tagName) &&\n options.warn\n ) {\n options.warn(\n `tag <${stack[i].tag}> has no matching end tag.`\n )\n }\n if (options.end) {\n options.end(stack[i].tag, start, end)\n }\n }\n stack.length = pos\n lastTag = pos && stack[pos - 1].tag\n } else if (lowerCasedTagName === 'br') {\n if (options.start) {\n options.start(tagName, [], true, start, end)\n }\n } else if (lowerCasedTagName === 'p') {\n if (options.start) {\n options.start(tagName, [], false, start, end)\n }\n if (options.end) {\n options.end(tagName, start, end)\n }\n }\n}\n```\n\n`parseEndTag` 的核心逻辑很简单，在介绍之前我们回顾一下在执行 `handleStartTag` 的时候，对于非一元标签（有 endTag）我们都把它构造成一个对象压入到 `stack` 中，如图所示：\n\n\n\n那么对于闭合标签的解析，就是倒序 `stack`，找到第一个和当前 `endTag` 匹配的元素。如果是正常的标签匹配，那么 `stack` 的最后一个元素应该和当前的 `endTag` 匹配，但是考虑到如下错误情况：\n\n```html\n
\n```\n这个时候当 `endTag` 为 `` 的时候，从 `stack` 尾部找到的标签是 ``，就不能匹配，因此这种情况会报警告。匹配后把栈到 `pos` 位置的都弹出，并从 `stack` 尾部拿到 `lastTag`。\n\n最后调用了 `options.end` 回调函数，并传入一些参数，这个回调函数的作用稍后我会详细介绍。\n\n- 文本\n\n```js\nlet text, rest, next\nif (textEnd >= 0) {\n rest = html.slice(textEnd)\n while (\n !endTag.test(rest) &&\n !startTagOpen.test(rest) &&\n !comment.test(rest) &&\n !conditionalComment.test(rest)\n ) {\n next = rest.indexOf('<', 1)\n if (next < 0) break\n textEnd += next\n rest = html.slice(textEnd)\n }\n text = html.substring(0, textEnd)\n advance(textEnd)\n}\n\nif (textEnd < 0) {\n text = html\n html = ''\n}\n\nif (options.chars && text) {\n options.chars(text)\n}\n```\n\n接下来判断 `textEnd` 是否大于等于 0 的，满足则说明到从当前位置到 `textEnd` 位置都是文本，并且如果 `<` 是纯文本中的字符，就继续找到真正的文本结束的位置，然后前进到结束的位置。\n\n再继续判断 `textEnd` 小于 0 的情况，则说明整个 `template` 解析完毕了，把剩余的 `html` 都赋值给了 `text`。\n\n最后调用了 `options.chars` 回调函数，并传 `text` 参数，这个回调函数的作用稍后我会详细介绍。\n\n因此，在循环解析整个 `template` 的过程中，会根据不同的情况，去执行不同的回调函数，下面我们来看看这些回调函数的作用。\n\n### 处理开始标签 \n\n对应伪代码：\n\n```js\nstart (tag, attrs, unary) {\n let element = createASTElement(tag, attrs)\n processElement(element)\n treeManagement()\n}\n```\n\n当解析到开始标签的时候，最后会执行 `start` 回调函数，函数主要就做 3 件事情，创建 AST 元素，处理 AST 元素，AST 树管理。下面我们来分别来看这几个过程。\n\n- 创建 AST 元素\n\n```js\n// check namespace.\n// inherit parent ns if there is one\nconst ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)\n\n// handle IE svg bug\n/* istanbul ignore if */\nif (isIE && ns === 'svg') {\n attrs = guardIESVGBug(attrs)\n}\n\nlet element: ASTElement = createASTElement(tag, attrs, currentParent)\nif (ns) {\n element.ns = ns\n}\n\nexport function createASTElement (\n tag: string,\n attrs: Array,\n parent: ASTElement | void\n): ASTElement {\n return {\n type: 1,\n tag,\n attrsList: attrs,\n attrsMap: makeAttrsMap(attrs),\n parent,\n children: []\n }\n}\n```\n\n通过 `createASTElement` 方法去创建一个 AST 元素，并添加了 namespace。可以看到，每一个 AST 元素就是一个普通的 JavaScript 对象，其中，`type` 表示 AST 元素类型，`tag` 表示标签名，`attrsList` 表示属性列表，`attrsMap` 表示属性映射表，`parent` 表示父的 AST 元素，`children` 表示子 AST 元素集合。\n\n- 处理 AST 元素\n\n```js\nif (isForbiddenTag(element) && !isServerRendering()) {\n element.forbidden = true\n process.env.NODE_ENV !== 'production' && warn(\n 'Templates should only be responsible for mapping the state to the ' +\n 'UI. Avoid placing tags with side-effects in your templates, such as ' +\n `<${tag}>` + ', as they will not be parsed.'\n )\n}\n\n// apply pre-transforms\nfor (let i = 0; i < preTransforms.length; i++) {\n element = preTransforms[i](element, options) || element\n}\n\nif (!inVPre) {\n processPre(element)\n if (element.pre) {\n inVPre = true\n }\n}\nif (platformIsPreTag(element.tag)) {\n inPre = true\n}\nif (inVPre) {\n processRawAttrs(element)\n} else if (!element.processed) {\n // structural directives\n processFor(element)\n processIf(element)\n processOnce(element)\n // element-scope stuff\n processElement(element, options)\n}\n```\n首先是对模块 `preTransforms` 的调用，其实所有模块的 `preTransforms`、 `transforms` 和 `postTransforms` 的定义都在 `src/platforms/web/compiler/modules` 目录中，这部分我们暂时不会介绍，之后会结合具体的例子说。接着判断 `element` 是否包含各种指令通过 `processXXX` 做相应的处理，处理的结果就是扩展 AST 元素的属性。这里我并不会一一介绍所有的指令处理，而是结合我们当前的例子，我们来看一下 `processFor` 和 `processIf`：\n\n```js\nexport function processFor (el: ASTElement) {\n let exp\n if ((exp = getAndRemoveAttr(el, 'v-for'))) {\n const res = parseFor(exp)\n if (res) {\n extend(el, res)\n } else if (process.env.NODE_ENV !== 'production') {\n warn(\n `Invalid v-for expression: ${exp}`\n )\n }\n }\n}\n\nexport const forAliasRE = /(.*?)\\s+(?:in|of)\\s+(.*)/\nexport const forIteratorRE = /,([^,\\}\\]]*)(?:,([^,\\}\\]]*))?$/\nconst stripParensRE = /^\\(|\\)$/g\nexport function parseFor (exp: string): ?ForParseResult {\n const inMatch = exp.match(forAliasRE)\n if (!inMatch) return\n const res = {}\n res.for = inMatch[2].trim()\n const alias = inMatch[1].trim().replace(stripParensRE, '')\n const iteratorMatch = alias.match(forIteratorRE)\n if (iteratorMatch) {\n res.alias = alias.replace(forIteratorRE, '')\n res.iterator1 = iteratorMatch[1].trim()\n if (iteratorMatch[2]) {\n res.iterator2 = iteratorMatch[2].trim()\n }\n } else {\n res.alias = alias\n }\n return res\n}\n```\n\n`processFor` 就是从元素中拿到 `v-for` 指令的内容，然后分别解析出 `for`、`alias`、`iterator1`、`iterator2` 等属性的值添加到 AST 的元素上。就我们的示例 `v-for=\"(item,index) in data\"` 而言，解析出的的 `for` 是 `data`，`alias` 是 `item`，`iterator1` 是 `index`，没有 `iterator2`。\n\n```js\nfunction processIf (el) {\n const exp = getAndRemoveAttr(el, 'v-if')\n if (exp) {\n el.if = exp\n addIfCondition(el, {\n exp: exp,\n block: el\n })\n } else {\n if (getAndRemoveAttr(el, 'v-else') != null) {\n el.else = true\n }\n const elseif = getAndRemoveAttr(el, 'v-else-if')\n if (elseif) {\n el.elseif = elseif\n }\n }\n}\nexport function addIfCondition (el: ASTElement, condition: ASTIfCondition) {\n if (!el.ifConditions) {\n el.ifConditions = []\n }\n el.ifConditions.push(condition)\n}\n```\n\n`processIf` 就是从元素中拿 `v-if` 指令的内容，如果拿到则给 AST 元素添加 `if` 属性和 `ifConditions` 属性；否则尝试拿 `v-else` 指令及 `v-else-if` 指令的内容，如果拿到则给 AST 元素分别添加 `else` 和 `elseif` 属性。 \n\n- AST 树管理\n\n我们在处理开始标签的时候为每一个标签创建了一个 AST 元素，在不断解析模板创建 AST 元素的时候，我们也要为它们建立父子关系，就像 DOM 元素的父子关系那样。\n\nAST 树管理相关代码如下：\n\n```js\nfunction checkRootConstraints (el) {\n if (process.env.NODE_ENV !== 'production') {\n if (el.tag === 'slot' || el.tag === 'template') {\n warnOnce(\n `Cannot use <${el.tag}> as component root element because it may ` +\n 'contain multiple nodes.'\n )\n }\n if (el.attrsMap.hasOwnProperty('v-for')) {\n warnOnce(\n 'Cannot use v-for on stateful component root element because ' +\n 'it renders multiple elements.'\n )\n }\n }\n}\n\n\n// tree management\nif (!root) {\n root = element\n checkRootConstraints(root)\n} else if (!stack.length) {\n // allow root elements with v-if, v-else-if and v-else\n if (root.if && (element.elseif || element.else)) {\n checkRootConstraints(element)\n addIfCondition(root, {\n exp: element.elseif,\n block: element\n })\n } else if (process.env.NODE_ENV !== 'production') {\n warnOnce(\n `Component template should contain exactly one root element. ` +\n `If you are using v-if on multiple elements, ` +\n `use v-else-if to chain them instead.`\n )\n }\n}\nif (currentParent && !element.forbidden) {\n if (element.elseif || element.else) {\n processIfConditions(element, currentParent)\n } else if (element.slotScope) { // scoped slot\n currentParent.plain = false\n const name = element.slotTarget || '\"default\"'\n ;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element\n } else {\n currentParent.children.push(element)\n element.parent = currentParent\n }\n}\nif (!unary) {\n currentParent = element\n stack.push(element)\n} else {\n closeElement(element)\n}\n```\n\nAST 树管理的目标是构建一颗 AST 树，本质上它要维护 `root` 根节点和当前父节点 `currentParent`。为了保证元素可以正确闭合，这里也利用了 `stack` 栈的数据结构，和我们之前解析模板时用到的 `stack` 类似。\n\n当我们在处理开始标签的时候，判断如果有 `currentParent`，会把当前 AST 元素 push 到 `currentParent.chilldren` 中，同时把 AST 元素的 `parent` 指向 `currentParent`。\n\n 接着就是更新 `currentParent` 和 `stack` ，判断当前如果不是一个一元标签，我们要把它生成的 AST 元素 push 到 `stack` 中，并且把当前的 AST 元素赋值给 `currentParent`。\n\n`stack` 和 `currentParent` 除了在处理开始标签的时候会变化，在处理闭合标签的时候也会变化，因此整个 AST 树管理要结合闭合标签的处理逻辑看。\n\n### 处理闭合标签\n\n对应伪代码：\n\n```js\nend () {\n treeManagement()\n closeElement()\n}\n```\n\n当解析到闭合标签的时候，最后会执行 `end` 回调函数：\n\n```js\n// remove trailing whitespace\nconst element = stack[stack.length - 1]\nconst lastNode = element.children[element.children.length - 1]\nif (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {\n element.children.pop()\n}\n// pop stack\nstack.length -= 1\ncurrentParent = stack[stack.length - 1]\ncloseElement(element)\n```\n\n首先处理了尾部空格的情况，然后把 `stack` 的元素弹一个出栈，并把 `stack` 最后一个元素赋值给 `currentParent`，这样就保证了当遇到闭合标签的时候，可以正确地更新 `stack` 的长度以及 `currentParent` 的值，这样就维护了整个 AST 树。\n\n最后执行了 `closeElement(element)`：\n\n```js\nfunction closeElement (element) {\n // check pre state\n if (element.pre) {\n inVPre = false\n }\n if (platformIsPreTag(element.tag)) {\n inPre = false\n }\n // apply post-transforms\n for (let i = 0; i < postTransforms.length; i++) {\n postTransforms[i](element, options)\n }\n}\n```\n`closeElement` 逻辑很简单，就是更新一下 `inVPre` 和 `inPre` 的状态，以及执行 `postTransforms` 函数，这些我们暂时都不必了解。\n\n### 处理文本内容\n\n对应伪代码：\n\n```js\nchars (text: string) {\n handleText()\n createChildrenASTOfText()\n}\n```\n\n除了处理开始标签和闭合标签，我们还会在解析模板的过程中去处理一些文本内容：\n\n```js\nconst children = currentParent.children\ntext = inPre || text.trim()\n ? isTextTag(currentParent) ? text : decodeHTMLCached(text)\n // only preserve whitespace if its not right after a starting tag\n : preserveWhitespace && children.length ? ' ' : ''\nif (text) {\n let res\n if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {\n children.push({\n type: 2,\n expression: res.expression,\n tokens: res.tokens,\n text\n })\n } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {\n children.push({\n type: 3,\n text\n })\n }\n}\n```\n文本构造的 AST 元素有 2 种类型，一种是有表达式的，`type` 为 2，一种是纯文本，`type` 为 3。在我们的例子中，文本就是 `{{item}}:{{index}}`，是个表达式，通过执行 `parseText(text, delimiters)` 对文本解析，它的定义在 `src/compiler/parser/text-parser.js` 中：\n\n```js\nconst defaultTagRE = /\\{\\{((?:.|\\n)+?)\\}\\}/g\nconst regexEscapeRE = /[-.*+?^${}()|[\\]\\/\\\\]/g\n\nconst buildRegex = cached(delimiters => {\n const open = delimiters[0].replace(regexEscapeRE, '\\\\$&')\n const close = delimiters[1].replace(regexEscapeRE, '\\\\$&')\n return new RegExp(open + '((?:.|\\\\n)+?)' + close, 'g')\n})\n\nexport function parseText (\n text: string,\n delimiters?: [string, string]\n): TextParseResult | void {\n const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE\n if (!tagRE.test(text)) {\n return\n }\n const tokens = []\n const rawTokens = []\n let lastIndex = tagRE.lastIndex = 0\n let match, index, tokenValue\n while ((match = tagRE.exec(text))) {\n index = match.index\n // push text token\n if (index > lastIndex) {\n rawTokens.push(tokenValue = text.slice(lastIndex, index))\n tokens.push(JSON.stringify(tokenValue))\n }\n // tag token\n const exp = parseFilters(match[1].trim())\n tokens.push(`_s(${exp})`)\n rawTokens.push({ '@binding': exp })\n lastIndex = index + match[0].length\n }\n if (lastIndex < text.length) {\n rawTokens.push(tokenValue = text.slice(lastIndex))\n tokens.push(JSON.stringify(tokenValue))\n }\n return {\n expression: tokens.join('+'),\n tokens: rawTokens\n }\n}\n```\n\n`parseText` 首先根据分隔符（默认是 `{{}}`）构造了文本匹配的正则表达式，然后再循环匹配文本，遇到普通文本就 push 到 `rawTokens` 和 `tokens` 中，如果是表达式就转换成 `_s(${exp})` push 到 `tokens` 中，以及转换成 `{@binding:exp}` push 到 `rawTokens` 中。\n \n 对于我们的例子 `{{item}}:{{index}}`，`tokens` 就是 `[_s(item),'\":\"',_s(index)]`；`rawTokens` 就是 `[{'@binding':'item'},':',{'@binding':'index'}]`。那么返回的对象如下：\n \n ```js\nreturn {\n expression: '_s(item)+\":\"+_s(index)',\n tokens: [{'@binding':'item'},':',{'@binding':'index'}]\n}\n```\n\n## 流程图\n\n\n\n## 总结\n\n那么至此，`parse` 的过程就分析完了，看似复杂，但我们可以抛开细节理清它的整体流程。`parse` 的目标是把 `template` 模板字符串转换成 AST 树，它是一种用 JavaScript 对象的形式来描述整个模板。那么整个 `parse` 的过程是利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 AST 树的目的。\n\nAST 元素节点总共有 3 种类型，`type` 为 1 表示是普通元素，为 2 表示是表达式，为 3 表示是纯文本。其实这里我觉得源码写的不够友好，这种是典型的魔术数字，如果转换成用常量表达会更利于源码阅读。\n\n当 AST 树构造完毕，下一步就是 `optimize` 优化这颗树。\n" }, { "path": "docs/v2/components/async-component.md", "content": "# 异步组件\n\n在我们平时的开发工作中，为了减少首屏代码体积，往往会把一些非首屏的组件设计成异步组件，按需加载。Vue 也原生支持了异步组件的能力，如下：\n\n```js\nVue.component('async-example', function (resolve, reject) {\n // 这个特殊的 require 语法告诉 webpack\n // 自动将编译后的代码分割成不同的块，\n // 这些块将通过 Ajax 请求自动下载。\n require(['./my-async-component'], resolve)\n})\n```\n\n示例中可以看到，Vue 注册的组件不再是一个对象，而是一个工厂函数，函数有两个参数 `resolve` 和 `reject`，函数内部用 `setTimout` 模拟了异步，实际使用可能是通过动态请求异步组件的 JS 地址，最终通过执行 `resolve` 方法，它的参数就是我们的异步组件对象。\n\n在了解了异步组件如何注册后，我们从源码的角度来分析一下它的实现。\n\n上一节我们分析了组件的注册逻辑，由于组件的定义并不是一个普通对象，所以不会执行 `Vue.extend` 的逻辑把它变成一个组件的构造函数，但是它仍然可以执行到 `createComponent` 函数，我们再来对这个函数做回顾，它的定义在 `src/core/vdom/create-component/js` 中：\n\n```js\nexport function createComponent (\n Ctor: Class | Function | Object | void,\n data: ?VNodeData,\n context: Component,\n children: ?Array,\n tag?: string\n): VNode | Array | void {\n if (isUndef(Ctor)) {\n return\n }\n\n const baseCtor = context.$options._base\n\n // plain options object: turn it into a constructor\n if (isObject(Ctor)) {\n Ctor = baseCtor.extend(Ctor)\n }\n \n // ...\n\n // async component\n let asyncFactory\n if (isUndef(Ctor.cid)) {\n asyncFactory = Ctor\n Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)\n if (Ctor === undefined) {\n // return a placeholder node for async component, which is rendered\n // as a comment node but preserves all the raw information for the node.\n // the information will be used for async server-rendering and hydration.\n return createAsyncPlaceholder(\n asyncFactory,\n data,\n context,\n children,\n tag\n )\n }\n }\n}\n```\n\n我们省略了不必要的逻辑，只保留关键逻辑，由于我们这个时候传入的 `Ctor` 是一个函数，那么它也并不会执行 `Vue.extend` 逻辑，因此它的 `cid` 是 `undefiend`，进入了异步组件创建的逻辑。这里首先执行了 `Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)` 方法，它的定义在 `src/core/vdom/helpers/resolve-async-component.js` 中：\n\n```js\nexport function resolveAsyncComponent (\n factory: Function,\n baseCtor: Class,\n context: Component\n): Class | void {\n if (isTrue(factory.error) && isDef(factory.errorComp)) {\n return factory.errorComp\n }\n\n if (isDef(factory.resolved)) {\n return factory.resolved\n }\n\n if (isTrue(factory.loading) && isDef(factory.loadingComp)) {\n return factory.loadingComp\n }\n\n if (isDef(factory.contexts)) {\n // already pending\n factory.contexts.push(context)\n } else {\n const contexts = factory.contexts = [context]\n let sync = true\n\n const forceRender = () => {\n for (let i = 0, l = contexts.length; i < l; i++) {\n contexts[i].$forceUpdate()\n }\n }\n\n const resolve = once((res: Object | Class) => {\n // cache resolved\n factory.resolved = ensureCtor(res, baseCtor)\n // invoke callbacks only if this is not a synchronous resolve\n // (async resolves are shimmed as synchronous during SSR)\n if (!sync) {\n forceRender()\n }\n })\n\n const reject = once(reason => {\n process.env.NODE_ENV !== 'production' && warn(\n `Failed to resolve async component: ${String(factory)}` +\n (reason ? `\\nReason: ${reason}` : '')\n )\n if (isDef(factory.errorComp)) {\n factory.error = true\n forceRender()\n }\n })\n\n const res = factory(resolve, reject)\n\n if (isObject(res)) {\n if (typeof res.then === 'function') {\n // () => Promise\n if (isUndef(factory.resolved)) {\n res.then(resolve, reject)\n }\n } else if (isDef(res.component) && typeof res.component.then === 'function') {\n res.component.then(resolve, reject)\n\n if (isDef(res.error)) {\n factory.errorComp = ensureCtor(res.error, baseCtor)\n }\n\n if (isDef(res.loading)) {\n factory.loadingComp = ensureCtor(res.loading, baseCtor)\n if (res.delay === 0) {\n factory.loading = true\n } else {\n setTimeout(() => {\n if (isUndef(factory.resolved) && isUndef(factory.error)) {\n factory.loading = true\n forceRender()\n }\n }, res.delay || 200)\n }\n }\n\n if (isDef(res.timeout)) {\n setTimeout(() => {\n if (isUndef(factory.resolved)) {\n reject(\n process.env.NODE_ENV !== 'production'\n ? `timeout (${res.timeout}ms)`\n : null\n )\n }\n }, res.timeout)\n }\n }\n }\n\n sync = false\n // return in case resolved synchronously\n return factory.loading\n ? factory.loadingComp\n : factory.resolved\n }\n}\n```\n\n`resolveAsyncComponent` 函数的逻辑略复杂，因为它实际上处理了 3 种异步组件的创建方式，除了刚才示例的组件注册方式，还支持 2 种，一种是支持 `Promise` 创建组件的方式，如下：\n\n```js\nVue.component(\n 'async-webpack-example',\n // 该 `import` 函数返回一个 `Promise` 对象。\n () => import('./my-async-component')\n)\n```\n\n另一种是高级异步组件，如下：\n\n```js\nconst AsyncComp = () => ({\n // 需要加载的组件。应当是一个 Promise\n component: import('./MyComp.vue'),\n // 加载中应当渲染的组件\n loading: LoadingComp,\n // 出错时渲染的组件\n error: ErrorComp,\n // 渲染加载中组件前的等待时间。默认：200ms。\n delay: 200,\n // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity\n timeout: 3000\n})\nVue.component('async-example', AsyncComp)\n```\n\n那么解下来，我们就根据这 3 种异步组件的情况，来分别去分析 `resolveAsyncComponent` 的逻辑。\n\n## 普通函数异步组件\n\n针对普通函数的情况，前面几个 if 判断可以忽略，它们是为高级组件所用，对于 `factory.contexts` 的判断，是考虑到多个地方同时初始化一个异步组件，那么它的实际加载应该只有一次。接着进入实际加载逻辑，定义了 `forceRender`、`resolve` 和 `reject` 函数，注意 `resolve` 和 `reject` 函数用 `once` 函数做了一层包装，它的定义在 `src/shared/util.js` 中：\n\n````js\n/**\n * Ensure a function is called only once.\n */\nexport function once (fn: Function): Function {\n let called = false\n return function () {\n if (!called) {\n called = true\n fn.apply(this, arguments)\n }\n }\n}\n````\n`once` 逻辑非常简单，传入一个函数，并返回一个新函数，它非常巧妙地利用闭包和一个标志位保证了它包装的函数只会执行一次，也就是确保 `resolve` 和 `reject` 函数只执行一次。\n\n接下来执行 `const res = factory(resolve, reject)` 逻辑，这块儿就是执行我们组件的工厂函数，同时把 `resolve` 和 `reject` 函数作为参数传入，组件的工厂函数通常会先发送请求去加载我们的异步组件的 JS 文件，拿到组件定义的对象 `res` 后，执行 `resolve(res)` 逻辑，它会先执行 `factory.resolved = ensureCtor(res, baseCtor)`：\n\n```js\nfunction ensureCtor (comp: any, base) {\n if (\n comp.__esModule ||\n (hasSymbol && comp[Symbol.toStringTag] === 'Module')\n ) {\n comp = comp.default\n }\n return isObject(comp)\n ? base.extend(comp)\n : comp\n}\n```\n这个函数目的是为了保证能找到异步组件 JS 定义的组件对象，并且如果它是一个普通对象，则调用 `Vue.extend` 把它转换成一个组件的构造函数。\n\n`resolve` 逻辑最后判断了 `sync`，显然我们这个场景下 `sync` 为 false，那么就会执行 `forceRender` 函数，它会遍历 `factory.contexts`，拿到每一个调用异步组件的实例 `vm`, 执行 `vm.$forceUpdate()` 方法，它的定义在 `src/core/instance/lifecycle.js` 中：\n \n```js\nVue.prototype.$forceUpdate = function () {\n const vm: Component = this\n if (vm._watcher) {\n vm._watcher.update()\n }\n}\n```\n\n`$forceUpdate` 的逻辑非常简单，就是调用渲染 `watcher` 的 `update` 方法，让渲染 `watcher` 对应的回调函数执行，也就是触发了组件的重新渲染。之所以这么做是因为 Vue 通常是数据驱动视图重新渲染，但是在整个异步组件加载过程中是没有数据发生变化的，所以通过执行 `$forceUpdate` 可以强制组件重新渲染一次。\n\n## `Promise` 异步组件\n\n```js\nVue.component(\n 'async-webpack-example',\n // 该 `import` 函数返回一个 `Promise` 对象。\n () => import('./my-async-component')\n)\n```\nwebpack 2+ 支持了异步加载的语法糖：`() => import('./my-async-component')`，当执行完 `res = factory(resolve, reject)`，返回的值就是 ` import('./my-async-component')` 的返回值，它是一个 `Promise` 对象。接着进入 if 条件，又判断了 `typeof res.then === 'function')`，条件满足，执行：\n\n```js\nif (isUndef(factory.resolved)) {\n res.then(resolve, reject)\n}\n```\n当组件异步加载成功后，执行 `resolve`，加载失败则执行 `reject`，这样就非常巧妙地实现了配合 webpack 2+ 的异步加载组件的方式（`Promise`）加载异步组件。\n\n## 高级异步组件\n\n由于异步加载组件需要动态加载 JS，有一定网络延时，而且有加载失败的情况，所以通常我们在开发异步组件相关逻辑的时候需要设计 loading 组件和 error 组件，并在适当的时机渲染它们。Vue.js 2.3+ 支持了一种高级异步组件的方式，它通过一个简单的对象配置，帮你搞定 loading 组件和 error 组件的渲染时机，你完全不用关心细节，非常方便。接下来我们就从源码的角度来分析高级异步组件是怎么实现的。\n\n```js\nconst AsyncComp = () => ({\n // 需要加载的组件。应当是一个 Promise\n component: import('./MyComp.vue'),\n // 加载中应当渲染的组件\n loading: LoadingComp,\n // 出错时渲染的组件\n error: ErrorComp,\n // 渲染加载中组件前的等待时间。默认：200ms。\n delay: 200,\n // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity\n timeout: 3000\n})\nVue.component('async-example', AsyncComp)\n```\n高级异步组件的初始化逻辑和普通异步组件一样，也是执行 `resolveAsyncComponent`，当执行完 `res = factory(resolve, reject)`，返回值就是定义的组件对象，显然满足 `else if (isDef(res.component) && typeof res.component.then === 'function')` 的逻辑，接着执行 `res.component.then(resolve, reject)`，当异步组件加载成功后，执行 `resolve`，失败执行 `reject`。\n\n因为异步组件加载是一个异步过程，它接着又同步执行了如下逻辑：\n\n```js\nif (isDef(res.error)) {\n factory.errorComp = ensureCtor(res.error, baseCtor)\n}\n\nif (isDef(res.loading)) {\n factory.loadingComp = ensureCtor(res.loading, baseCtor)\n if (res.delay === 0) {\n factory.loading = true\n } else {\n setTimeout(() => {\n if (isUndef(factory.resolved) && isUndef(factory.error)) {\n factory.loading = true\n forceRender()\n }\n }, res.delay || 200)\n }\n}\n\nif (isDef(res.timeout)) {\n setTimeout(() => {\n if (isUndef(factory.resolved)) {\n reject(\n process.env.NODE_ENV !== 'production'\n ? `timeout (${res.timeout}ms)`\n : null\n )\n }\n }, res.timeout)\n}\n```\n先判断 `res.error` 是否定义了 error 组件，如果有的话则赋值给 `factory.errorComp`。\n接着判断 `res.loading` 是否定义了 loading 组件，如果有的话则赋值给 `factory.loadingComp`，如果设置了 `res.delay` 且为 0，则设置 `factory.loading = true`，否则延时 `delay` 的时间执行：\n\n```js\nif (isUndef(factory.resolved) && isUndef(factory.error)) {\n factory.loading = true\n forceRender()\n}\n```\n\n最后判断 `res.timeout`，如果配置了该项，则在 `res.timout` 时间后，如果组件没有成功加载，执行 `reject`。\n\n在 `resolveAsyncComponent` 的最后有一段逻辑：\n\n```js\nsync = false\nreturn factory.loading\n ? factory.loadingComp\n : factory.resolved\n```\n\n如果 `delay` 配置为 0，则这次直接渲染 loading 组件，否则则延时 `delay` 执行 `forceRender`，那么又会再一次执行到 `resolveAsyncComponent`。\n\n那么这时候我们有几种情况，按逻辑的执行顺序，对不同的情况做判断。\n\n### 异步组件加载失败\n当异步组件加载失败，会执行 `reject` 函数：\n\n```js\nconst reject = once(reason => {\n process.env.NODE_ENV !== 'production' && warn(\n `Failed to resolve async component: ${String(factory)}` +\n (reason ? `\\nReason: ${reason}` : '')\n )\n if (isDef(factory.errorComp)) {\n factory.error = true\n forceRender()\n }\n})\n```\n这个时候会把 `factory.error` 设置为 `true`，同时执行 `forceRender()` 再次执行到 `resolveAsyncComponent`：\n\n```js\nif (isTrue(factory.error) && isDef(factory.errorComp)) {\n return factory.errorComp\n}\n```\n\n那么这个时候就返回 `factory.errorComp`，直接渲染 error 组件。\n \n### 异步组件加载成功\n\n当异步组件加载成功，会执行 `resolve` 函数：\n\n```js\nconst resolve = once((res: Object | Class) => {\n factory.resolved = ensureCtor(res, baseCtor)\n if (!sync) {\n forceRender()\n }\n})\n```\n首先把加载结果缓存到 `factory.resolved` 中，这个时候因为 `sync` 已经为 false，则执行 `forceRender()` 再次执行到 `resolveAsyncComponent`：\n\n```js\nif (isDef(factory.resolved)) {\n return factory.resolved\n}\n```\n那么这个时候直接返回 `factory.resolved`，渲染成功加载的组件。\n\n### 异步组件加载中\n\n如果异步组件加载中并未返回，这时候会走到这个逻辑：\n\n```js\nif (isTrue(factory.loading) && isDef(factory.loadingComp)) {\n return factory.loadingComp\n}\n```\n\n那么则会返回 `factory.loadingComp`，渲染 loading 组件。\n\n### 异步组件加载超时\n\n如果超时，则走到了 `reject` 逻辑，之后逻辑和加载失败一样，渲染 error 组件。\n\n## 异步组件 patch\n\n回到 `createComponent` 的逻辑：\n\n```js\nCtor = resolveAsyncComponent(asyncFactory, baseCtor, context)\nif (Ctor === undefined) {\n return createAsyncPlaceholder(\n asyncFactory,\n data,\n context,\n children,\n tag\n )\n}\n```\n\n如果是第一次执行 `resolveAsyncComponent`，除非使用高级异步组件 `0 delay` 去创建了一个 loading 组件，否则返回是 `undefiend`，接着通过 `createAsyncPlaceholder` 创建一个注释节点作为占位符。它的定义在 `src/core/vdom/helpers/resolve-async-components.js` 中：\n\n```js\nexport function createAsyncPlaceholder (\n factory: Function,\n data: ?VNodeData,\n context: Component,\n children: ?Array,\n tag: ?string\n): VNode {\n const node = createEmptyVNode()\n node.asyncFactory = factory\n node.asyncMeta = { data, context, children, tag }\n return node\n}\n```\n\n实际上就是就是创建了一个占位的注释 VNode，同时把 `asyncFactory` 和 `asyncMeta` 赋值给当前 `vnode`。\n\n当执行 `forceRender` 的时候，会触发组件的重新渲染，那么会再一次执行 `resolveAsyncComponent`，这时候就会根据不同的情况，可能返回 loading、error 或成功加载的异步组件，返回值不为 `undefined`，因此就走正常的组件 `render`、`patch` 过程，与组件第一次渲染流程不一样，这个时候是存在新旧 `vnode` 的，下一章我会分析组件更新的 `patch` 过程。\n\n\n## 总结\n\n通过以上代码分析，我们对 Vue 的异步组件的实现有了深入的了解，知道了 3 种异步组件的实现方式，并且看到高级异步组件的实现是非常巧妙的，它实现了 loading、resolve、reject、timeout 4 种状态。异步组件实现的本质是 2 次渲染，除了 0 delay 的高级异步组件第一次直接渲染成 loading 组件外，其它都是第一次渲染生成一个注释节点，当异步获取组件成功后，再通过 `forceRender` 强制重新渲染，这样就能正确渲染出我们异步加载的组件了。" }, { "path": "docs/v2/components/component-register.md", "content": "# 组件注册\n\n在 Vue.js 中，除了它内置的组件如 `keep-alive`、`component`、`transition`、`transition-group` 等，其它用户自定义组件在使用前必须注册。很多同学在开发过程中可能会遇到如下报错信息：\n\n``` \n'Unknown custom element: - did you register the component correctly?\n For recursive components, make sure to provide the \"name\" option.'\n```\n\n一般报这个错的原因都是我们使用了未注册的组件。Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。接下来我们从源码分析的角度来分析这两种注册方式。\n\n## 全局注册\n\n要注册一个全局组件，可以使用 `Vue.component(tagName, options)`。例如：\n\n```js\nVue.component('my-component', {\n // 选项\n})\n```\n\n那么，`Vue.component` 函数是在什么时候定义的呢，它的定义过程发生在最开始初始化 Vue 的全局函数的时候，代码在 `src/core/global-api/assets.js` 中：\n\n```js\nimport { ASSET_TYPES } from 'shared/constants'\nimport { isPlainObject, validateComponentName } from '../util/index'\n\nexport function initAssetRegisters (Vue: GlobalAPI) {\n /**\n * Create asset registration methods.\n */\n ASSET_TYPES.forEach(type => {\n Vue[type] = function (\n id: string,\n definition: Function | Object\n ): Function | Object | void {\n if (!definition) {\n return this.options[type + 's'][id]\n } else {\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && type === 'component') {\n validateComponentName(id)\n }\n if (type === 'component' && isPlainObject(definition)) {\n definition.name = definition.name || id\n definition = this.options._base.extend(definition)\n }\n if (type === 'directive' && typeof definition === 'function') {\n definition = { bind: definition, update: definition }\n }\n this.options[type + 's'][id] = definition\n return definition\n }\n }\n })\n}\n```\n函数首先遍历 `ASSET_TYPES`，得到 `type` 后挂载到 Vue 上 。`ASSET_TYPES` 的定义在 `src/shared/constants.js` 中：\n\n```js\nexport const ASSET_TYPES = [\n 'component',\n 'directive',\n 'filter'\n]\n```\n所以实际上 Vue 是初始化了 3 个全局函数，并且如果 `type` 是 `component` 且 `definition` 是一个对象的话，通过 `this.opitons._base.extend`， 相当于 `Vue.extend` 把这个对象转换成一个继承于 Vue 的构造函数，最后通过 `this.options[type + 's'][id] = definition` 把它挂载到 `Vue.options.components` 上。\n\n由于我们每个组件的创建都是通过 `Vue.extend` 继承而来，我们之前分析过在继承的过程中有这么一段逻辑：\n\n```js\nSub.options = mergeOptions(\n Super.options,\n extendOptions\n)\n```\n\n也就是说它会把 `Vue.options` 合并到 `Sub.options`，也就是组件的 `options` 上， 然后在组件的实例化阶段，会执行 `merge options` 逻辑，把 `Sub.options.components` 合并到 `vm.$options.components` 上。\n\n然后在创建 `vnode` 的过程中，会执行 `_createElement` 方法，我们再来回顾一下这部分的逻辑，它的定义在 `src/core/vdom/create-element.js` 中：\n\n```js\nexport function _createElement (\n context: Component,\n tag?: string | Class | Function | Object,\n data?: VNodeData,\n children?: any,\n normalizationType?: number\n): VNode | Array {\n // ...\n let vnode, ns\n if (typeof tag === 'string') {\n let Ctor\n ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)\n if (config.isReservedTag(tag)) {\n // platform built-in elements\n vnode = new VNode(\n config.parsePlatformTagName(tag), data, children,\n undefined, undefined, context\n )\n } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {\n // component\n vnode = createComponent(Ctor, data, context, children, tag)\n } else {\n // unknown or unlisted namespaced elements\n // check at runtime because it may get assigned a namespace when its\n // parent normalizes children\n vnode = new VNode(\n tag, data, children,\n undefined, undefined, context\n )\n }\n } else {\n // direct component options / constructor\n vnode = createComponent(tag, data, context, children)\n }\n // ...\n}\n```\n这里有一个判断逻辑 `isDef(Ctor = resolveAsset(context.$options, 'components', tag))`，先来看一下 `resolveAsset` 的定义，在 `src/core/utils/options.js` 中：\n\n```js\n/**\n * Resolve an asset.\n * This function is used because child instances need access\n * to assets defined in its ancestor chain.\n */\nexport function resolveAsset (\n options: Object,\n type: string,\n id: string,\n warnMissing?: boolean\n): any {\n /* istanbul ignore if */\n if (typeof id !== 'string') {\n return\n }\n const assets = options[type]\n // check local registration variations first\n if (hasOwn(assets, id)) return assets[id]\n const camelizedId = camelize(id)\n if (hasOwn(assets, camelizedId)) return assets[camelizedId]\n const PascalCaseId = capitalize(camelizedId)\n if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]\n // fallback to prototype chain\n const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]\n if (process.env.NODE_ENV !== 'production' && warnMissing && !res) {\n warn(\n 'Failed to resolve ' + type.slice(0, -1) + ': ' + id,\n options\n )\n }\n return res\n}\n```\n这段逻辑很简单，先通过 `const assets = options[type]` 拿到 `assets`，然后再尝试拿 `assets[id]`，这里有个顺序，先直接使用 `id` 拿，如果不存在，则把 `id` 变成驼峰的形式再拿，如果仍然不存在则在驼峰的基础上把首字母再变成大写的形式再拿，如果仍然拿不到则报错。这样说明了我们在使用 `Vue.component(id, definition)` 全局注册组件的时候，id 可以是连字符、驼峰或首字母大写的形式。\n\n那么回到我们的调用 `resolveAsset(context.$options, 'components', tag)`，即拿 `vm.$options.components[tag]`，这样我们就可以在 `resolveAsset` 的时候拿到这个组件的构造函数，并作为 `createComponent` 的钩子的参数。\n\n## 局部注册\n\nVue.js 也同样支持局部注册，我们可以在一个组件内部使用 `components` 选项做组件的局部注册，例如：\n\n```js\nimport HelloWorld from './components/HelloWorld'\n\nexport default {\n components: {\n HelloWorld\n }\n}\n```\n\n其实理解了全局注册的过程，局部注册是非常简单的。在组件的 Vue 的实例化阶段有一个合并 `option` 的逻辑，之前我们也分析过，所以就把 `components` 合并到 `vm.$options.components` 上，这样我们就可以在 `resolveAsset` 的时候拿到这个组件的构造函数，并作为 `createComponent` 的钩子的参数。\n\n注意，局部注册和全局注册不同的是，只有该类型的组件才可以访问局部注册的子组件，而全局注册是扩展到 `Vue.options` 下，所以在所有组件创建的过程中，都会从全局的 `Vue.options.components` 扩展到当前组件的 `vm.$options.components` 下，这就是全局注册的组件能被任意使用的原因。\n \n## 总结\n\n通过这一小节的分析，我们对组件的注册过程有了认识，并理解了全局注册和局部注册的差异。其实在平时的工作中，当我们使用到组件库的时候，往往更通用基础组件都是全局注册的，而编写的特例场景的业务组件都是局部注册的。了解了它们的原理，对我们在工作中到底使用全局注册组件还是局部注册组件是有这非常好的指导意义的。\n" }, { "path": "docs/v2/components/create-component.md", "content": "# createComponent\n\n上一章我们在分析 `createElement` 的实现的时候，它最终会调用 `_createElement` 方法，其中有一段逻辑是对参数 `tag` 的判断，如果是一个普通的 html 标签，像上一章的例子那样是一个普通的 div，则会实例化一个普通 VNode 节点，否则通过 `createComponent` 方法创建一个组件 VNode。\n\n```js\nif (typeof tag === 'string') {\n let Ctor\n ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)\n if (config.isReservedTag(tag)) {\n // platform built-in elements\n vnode = new VNode(\n config.parsePlatformTagName(tag), data, children,\n undefined, undefined, context\n )\n } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {\n // component\n vnode = createComponent(Ctor, data, context, children, tag)\n } else {\n // unknown or unlisted namespaced elements\n // check at runtime because it may get assigned a namespace when its\n // parent normalizes children\n vnode = new VNode(\n tag, data, children,\n undefined, undefined, context\n )\n }\n} else {\n // direct component options / constructor\n vnode = createComponent(tag, data, context, children)\n}\n```\n\n在我们这一章传入的是一个 App 对象，它本质上是一个 `Component` 类型，那么它会走到上述代码的 else 逻辑，直接通过 `createComponent` 方法来创建 `vnode`。所以接下来我们来看一下 `createComponent` 方法的实现，它定义在 `src/core/vdom/create-component.js` 文件中：\n\n```js\nexport function createComponent (\n Ctor: Class | Function | Object | void,\n data: ?VNodeData,\n context: Component,\n children: ?Array,\n tag?: string\n): VNode | Array | void {\n if (isUndef(Ctor)) {\n return\n }\n\n const baseCtor = context.$options._base\n\n // plain options object: turn it into a constructor\n if (isObject(Ctor)) {\n Ctor = baseCtor.extend(Ctor)\n }\n\n // if at this stage it's not a constructor or an async component factory,\n // reject.\n if (typeof Ctor !== 'function') {\n if (process.env.NODE_ENV !== 'production') {\n warn(`Invalid Component definition: ${String(Ctor)}`, context)\n }\n return\n }\n\n // async component\n let asyncFactory\n if (isUndef(Ctor.cid)) {\n asyncFactory = Ctor\n Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)\n if (Ctor === undefined) {\n // return a placeholder node for async component, which is rendered\n // as a comment node but preserves all the raw information for the node.\n // the information will be used for async server-rendering and hydration.\n return createAsyncPlaceholder(\n asyncFactory,\n data,\n context,\n children,\n tag\n )\n }\n }\n\n data = data || {}\n\n // resolve constructor options in case global mixins are applied after\n // component constructor creation\n resolveConstructorOptions(Ctor)\n\n // transform component v-model data into props & events\n if (isDef(data.model)) {\n transformModel(Ctor.options, data)\n }\n\n // extract props\n const propsData = extractPropsFromVNodeData(data, Ctor, tag)\n\n // functional component\n if (isTrue(Ctor.options.functional)) {\n return createFunctionalComponent(Ctor, propsData, data, context, children)\n }\n\n // extract listeners, since these needs to be treated as\n // child component listeners instead of DOM listeners\n const listeners = data.on\n // replace with listeners with .native modifier\n // so it gets processed during parent component patch.\n data.on = data.nativeOn\n\n if (isTrue(Ctor.options.abstract)) {\n // abstract components do not keep anything\n // other than props & listeners & slot\n\n // work around flow\n const slot = data.slot\n data = {}\n if (slot) {\n data.slot = slot\n }\n }\n\n // install component management hooks onto the placeholder node\n installComponentHooks(data)\n\n // return a placeholder vnode\n const name = Ctor.options.name || tag\n const vnode = new VNode(\n `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,\n data, undefined, undefined, undefined, context,\n { Ctor, propsData, listeners, tag, children },\n asyncFactory\n )\n\n // Weex specific: invoke recycle-list optimized @render function for\n // extracting cell-slot template.\n // https://github.com/Hanks10100/weex-native-directive/tree/master/component\n /* istanbul ignore if */\n if (__WEEX__ && isRecyclableComponent(vnode)) {\n return renderRecyclableComponentTemplate(vnode)\n }\n\n return vnode\n}\n```\n\n可以看到，`createComponent` 的逻辑也会有一些复杂，但是分析源码比较推荐的是只分析核心流程，分支流程可以之后针对性的看，所以这里针对组件渲染这个 case 主要就 3 个关键步骤：\n\n构造子类构造函数，安装组件钩子函数和实例化 `vnode`。\n\n## 构造子类构造函数\n\n```js\nconst baseCtor = context.$options._base\n\n// plain options object: turn it into a constructor\nif (isObject(Ctor)) {\n Ctor = baseCtor.extend(Ctor)\n}\n```\n\n我们在编写一个组件的时候，通常都是创建一个普通对象，还是以我们的 App.vue 为例，代码如下：\n\n```js\nimport HelloWorld from './components/HelloWorld'\n\nexport default {\n name: 'app',\n components: {\n HelloWorld\n }\n}\n```\n这里 export 的是一个对象，所以 `createComponent` 里的代码逻辑会执行到 `baseCtor.extend(Ctor)`，在这里 `baseCtor` 实际上就是 Vue，这个的定义是在最开始初始化 Vue 的阶段，在 `src/core/global-api/index.js` 中的 `initGlobalAPI` 函数有这么一段逻辑：\n\n```js\n// this is used to identify the \"base\" constructor to extend all plain-object\n// components with in Weex's multi-instance scenarios.\nVue.options._base = Vue\n```\n细心的同学会发现，这里定义的是 `Vue.options`，而我们的 `createComponent` 取的是 `context.$options`，实际上在 `src/core/instance/init.js` 里 Vue 原型上的 `_init` 函数中有这么一段逻辑：\n\n```js\nvm.$options = mergeOptions(\n resolveConstructorOptions(vm.constructor),\n options || {},\n vm\n)\n```\n\n这样就把 Vue 上的一些 `option` 扩展到了 vm.$options 上，所以我们也就能通过 `vm.$options._base` 拿到 Vue 这个构造函数了。`mergeOptions` 的实现我们会在后续章节中具体分析，现在只需要理解它的功能是把 Vue 构造函数的 `options` 和用户传入的 `options` 做一层合并，到 `vm.$options ` 上。\n\n在了解了 `baseCtor` 指向了 Vue 之后，我们来看一下 `Vue.extend` 函数的定义，在 `src/core/global-api/extend.js` 中。\n\n```js\n/**\n * Class inheritance\n */\nVue.extend = function (extendOptions: Object): Function {\n extendOptions = extendOptions || {}\n const Super = this\n const SuperId = Super.cid\n const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})\n if (cachedCtors[SuperId]) {\n return cachedCtors[SuperId]\n }\n\n const name = extendOptions.name || Super.options.name\n if (process.env.NODE_ENV !== 'production' && name) {\n validateComponentName(name)\n }\n\n const Sub = function VueComponent (options) {\n this._init(options)\n }\n Sub.prototype = Object.create(Super.prototype)\n Sub.prototype.constructor = Sub\n Sub.cid = cid++\n Sub.options = mergeOptions(\n Super.options,\n extendOptions\n )\n Sub['super'] = Super\n\n // For props and computed properties, we define the proxy getters on\n // the Vue instances at extension time, on the extended prototype. This\n // avoids Object.defineProperty calls for each instance created.\n if (Sub.options.props) {\n initProps(Sub)\n }\n if (Sub.options.computed) {\n initComputed(Sub)\n }\n\n // allow further extension/mixin/plugin usage\n Sub.extend = Super.extend\n Sub.mixin = Super.mixin\n Sub.use = Super.use\n\n // create asset registers, so extended classes\n // can have their private assets too.\n ASSET_TYPES.forEach(function (type) {\n Sub[type] = Super[type]\n })\n // enable recursive self-lookup\n if (name) {\n Sub.options.components[name] = Sub\n }\n\n // keep a reference to the super options at extension time.\n // later at instantiation we can check if Super's options have\n // been updated.\n Sub.superOptions = Super.options\n Sub.extendOptions = extendOptions\n Sub.sealedOptions = extend({}, Sub.options)\n\n // cache constructor\n cachedCtors[SuperId] = Sub\n return Sub\n}\n```\n\n`Vue.extend` 的作用就是构造一个 `Vue` 的子类，它使用一种非常经典的原型继承的方式把一个纯对象转换一个继承于 `Vue` 的构造器 `Sub` 并返回，然后对 `Sub` 这个对象本身扩展了一些属性，如扩展 `options`、添加全局 API 等；并且对配置中的 `props` 和 `computed` 做了初始化工作；最后对于这个 `Sub` 构造函数做了缓存，避免多次执行 `Vue.extend` 的时候对同一个子组件重复构造。\n\n这样当我们去实例化 `Sub` 的时候，就会执行 `this._init` 逻辑再次走到了 `Vue` 实例的初始化逻辑，实例化子组件的逻辑在之后的章节会介绍。\n\n```js\nconst Sub = function VueComponent (options) {\n this._init(options)\n}\n```\n\n## 安装组件钩子函数\n\n```js\n// install component management hooks onto the placeholder node\ninstallComponentHooks(data)\n```\n\n我们之前提到 Vue.js 使用的 Virtual DOM 参考的是开源库 [snabbdom](https://github.com/snabbdom/snabbdom)，它的一个特点是在 VNode 的 patch 流程中对外暴露了各种时机的钩子函数，方便我们做一些额外的事情，Vue.js 也是充分利用这一点，在初始化一个 Component 类型的 VNode 的过程中实现了几个钩子函数：\n\n```js\nconst componentVNodeHooks = {\n init (vnode: VNodeWithData, hydrating: boolean): ?boolean {\n if (\n vnode.componentInstance &&\n !vnode.componentInstance._isDestroyed &&\n vnode.data.keepAlive\n ) {\n // kept-alive components, treat as a patch\n const mountedNode: any = vnode // work around flow\n componentVNodeHooks.prepatch(mountedNode, mountedNode)\n } else {\n const child = vnode.componentInstance = createComponentInstanceForVnode(\n vnode,\n activeInstance\n )\n child.$mount(hydrating ? vnode.elm : undefined, hydrating)\n }\n },\n\n prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {\n const options = vnode.componentOptions\n const child = vnode.componentInstance = oldVnode.componentInstance\n updateChildComponent(\n child,\n options.propsData, // updated props\n options.listeners, // updated listeners\n vnode, // new parent vnode\n options.children // new children\n )\n },\n\n insert (vnode: MountedComponentVNode) {\n const { context, componentInstance } = vnode\n if (!componentInstance._isMounted) {\n componentInstance._isMounted = true\n callHook(componentInstance, 'mounted')\n }\n if (vnode.data.keepAlive) {\n if (context._isMounted) {\n // vue-router#1212\n // During updates, a kept-alive component's child components may\n // change, so directly walking the tree here may call activated hooks\n // on incorrect children. Instead we push them into a queue which will\n // be processed after the whole patch process ended.\n queueActivatedComponent(componentInstance)\n } else {\n activateChildComponent(componentInstance, true /* direct */)\n }\n }\n },\n\n destroy (vnode: MountedComponentVNode) {\n const { componentInstance } = vnode\n if (!componentInstance._isDestroyed) {\n if (!vnode.data.keepAlive) {\n componentInstance.$destroy()\n } else {\n deactivateChildComponent(componentInstance, true /* direct */)\n }\n }\n }\n}\n\nconst hooksToMerge = Object.keys(componentVNodeHooks)\n\nfunction installComponentHooks (data: VNodeData) {\n const hooks = data.hook || (data.hook = {})\n for (let i = 0; i < hooksToMerge.length; i++) {\n const key = hooksToMerge[i]\n const existing = hooks[key]\n const toMerge = componentVNodeHooks[key]\n if (existing !== toMerge && !(existing && existing._merged)) {\n hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge\n }\n }\n}\n\nfunction mergeHook (f1: any, f2: any): Function {\n const merged = (a, b) => {\n // flow complains about extra args which is why we use any\n f1(a, b)\n f2(a, b)\n }\n merged._merged = true\n return merged\n}\n```\n整个 `installComponentHooks` 的过程就是把 `componentVNodeHooks` 的钩子函数合并到 `data.hook` 中，在 VNode 执行 `patch` 的过程中执行相关的钩子函数，具体的执行我们稍后在介绍 `patch` 过程中会详细介绍。这里要注意的是合并策略，在合并过程中，如果某个时机的钩子已经存在 `data.hook` 中，那么通过执行 `mergeHook` 函数做合并，这个逻辑很简单，就是在最终执行的时候，依次执行这两个钩子函数即可。\n\n## 实例化 VNode\n\n```js\nconst name = Ctor.options.name || tag\nconst vnode = new VNode(\n `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,\n data, undefined, undefined, undefined, context,\n { Ctor, propsData, listeners, tag, children },\n asyncFactory\n)\nreturn vnode\n```\n\n最后一步非常简单，通过 `new VNode` 实例化一个 `vnode` 并返回。需要注意的是和普通元素节点的 `vnode` 不同，组件的 `vnode` 是没有 `children` 的，这点很关键，在之后的 `patch` 过程中我们会再提。\n\n## 总结\n\n这一节我们分析了 `createComponent` 的实现，了解到它在渲染一个组件的时候的 3 个关键逻辑：构造子类构造函数，安装组件钩子函数和实例化 `vnode`。`createComponent` 后返回的是组件 `vnode`，它也一样走到 `vm._update` 方法，进而执行了 `patch` 函数，我们在上一章对 `patch` 函数做了简单的分析，那么下一节我们会对它做进一步的分析。\n" }, { "path": "docs/v2/components/index.md", "content": "# 组件化\n\nVue.js 另一个核心思想是组件化。所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套。\n\n我们在用 Vue.js 开发实际项目的时候，就是像搭积木一样，编写一堆组件拼装生成页面。在 Vue.js 的官网中，也是花了大篇幅来介绍什么是组件，如何编写组件以及组件拥有的属性和特性。\n\n那么在这一章节，我们将从源码的角度来分析 Vue 的组件内部是如何工作的，只有了解了内部的工作原理，才能让我们使用它的时候更加得心应手。\n\n接下来我们会用 Vue-cli 初始化的代码为例，来分析一下 Vue 组件初始化的一个过程。\n\n```js\nimport Vue from 'vue'\nimport App from './App.vue'\n\nvar app = new Vue({\n el: '#app',\n // 这里的 h 是 createElement 方法\n render: h => h(App)\n})\n```\n这段代码相信很多同学都很熟悉，它和我们上一章相同的点也是通过 `render` 函数去渲染的，不同的这次通过 `createElement` 传的参数是一个组件而不是一个原生的标签，那么接下来我们就开始分析这一过程。" }, { "path": "docs/v2/components/lifecycle.md", "content": "# 生命周期\n\n每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。\n\n\n\n在我们实际项目开发过程中，会非常频繁地和 Vue 组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的。\n\n源码中最终执行生命周期的函数都是调用 `callHook` 方法，它的定义在 `src/core/instance/lifecycle` 中：\n\n```js\nexport function callHook (vm: Component, hook: string) {\n // #7573 disable dep collection when invoking lifecycle hooks\n pushTarget()\n const handlers = vm.$options[hook]\n if (handlers) {\n for (let i = 0, j = handlers.length; i < j; i++) {\n try {\n handlers[i].call(vm)\n } catch (e) {\n handleError(e, vm, `${hook} hook`)\n }\n }\n }\n if (vm._hasHookEvent) {\n vm.$emit('hook:' + hook)\n }\n popTarget()\n}\n```\n\n`callHook` 函数的逻辑很简单，根据传入的字符串 `hook`，去拿到 `vm.$options[hook]` 对应的回调函数数组，然后遍历执行，执行的时候把 `vm` 作为函数执行的上下文。\n\n在上一节中，我们详细地介绍了 Vue.js 合并 `options` 的过程，各个阶段的生命周期的函数也被合并到 `vm.$options` 里，并且是一个数组。因此 `callhook` 函数的功能就是调用某个生命周期钩子注册的所有回调函数。\n\n了解了生命周期的执行方式后，接下来我们会具体介绍每一个生命周期函数它的调用时机。\n\n## beforeCreate & created\n\n`beforeCreate` 和 `created` 函数都是在实例化 `Vue` 的阶段，在 `_init` 方法中执行的，它的定义在 `src/core/instance/init.js` 中：\n\n```js\nVue.prototype._init = function (options?: Object) {\n // ...\n initLifecycle(vm)\n initEvents(vm)\n initRender(vm)\n callHook(vm, 'beforeCreate')\n initInjections(vm) // resolve injections before data/props\n initState(vm)\n initProvide(vm) // resolve provide after data/props\n callHook(vm, 'created')\n // ...\n}\n```\n\n可以看到 `beforeCreate` 和 `created` 的钩子调用是在 `initState` 的前后，`initState` 的作用是初始化 `props`、`data`、`methods`、`watch`、`computed` 等属性，之后我们会详细分析。那么显然 `beforeCreate` 的钩子函数中就不能获取到 `props`、`data` 中定义的值，也不能调用 `methods` 中定义的函数。\n\n在这俩个钩子函数执行的时候，并没有渲染 DOM，所以我们也不能够访问 DOM，一般来说，如果组件在加载的时候需要和后端有交互，放在这俩个钩子函数执行都可以，如果是需要访问 `props`、`data` 等数据的话，就需要使用 `created` 钩子函数。之后我们会介绍 vue-router 和 vuex 的时候会发现它们都混合了 `beforeCreate` 钩子函数。\n\n## beforeMount & mounted\n\n顾名思义，`beforeMount` 钩子函数发生在 `mount`，也就是 DOM 挂载之前，它的调用时机是在 `mountComponent` 函数中，定义在 `src/core/instance/lifecycle.js` 中：\n\n```js\nexport function mountComponent (\n vm: Component,\n el: ?Element,\n hydrating?: boolean\n): Component {\n vm.$el = el\n // ...\n callHook(vm, 'beforeMount')\n\n let updateComponent\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && config.performance && mark) {\n updateComponent = () => {\n const name = vm._name\n const id = vm._uid\n const startTag = `vue-perf-start:${id}`\n const endTag = `vue-perf-end:${id}`\n\n mark(startTag)\n const vnode = vm._render()\n mark(endTag)\n measure(`vue ${name} render`, startTag, endTag)\n\n mark(startTag)\n vm._update(vnode, hydrating)\n mark(endTag)\n measure(`vue ${name} patch`, startTag, endTag)\n }\n } else {\n updateComponent = () => {\n vm._update(vm._render(), hydrating)\n }\n }\n\n // we set this to vm._watcher inside the watcher's constructor\n // since the watcher's initial patch may call $forceUpdate (e.g. inside child\n // component's mounted hook), which relies on vm._watcher being already defined\n new Watcher(vm, updateComponent, noop, {\n before () {\n if (vm._isMounted) {\n callHook(vm, 'beforeUpdate')\n }\n }\n }, true /* isRenderWatcher */)\n hydrating = false\n\n // manually mounted instance, call mounted on self\n // mounted is called for render-created child components in its inserted hook\n if (vm.$vnode == null) {\n vm._isMounted = true\n callHook(vm, 'mounted')\n }\n return vm\n}\n```\n在执行 `vm._render()` 函数渲染 VNode 之前，执行了 `beforeMount` 钩子函数，在执行完 `vm._update()` 把 VNode patch 到真实 DOM 后，执行 `mounted` 钩子。注意，这里对 `mounted` 钩子函数执行有一个判断逻辑，`vm.$vnode` 如果为 `null`，则表明这不是一次组件的初始化过程，而是我们通过外部 `new Vue` 初始化过程。那么对于组件，它的 `mounted` 时机在哪儿呢？\n\n之前我们提到过，组件的 VNode patch 到 DOM 后，会执行 `invokeInsertHook` 函数，把 `insertedVnodeQueue` 里保存的钩子函数依次执行一遍，它的定义在 `src/core/vdom/patch.js` 中：\n\n```js\nfunction invokeInsertHook (vnode, queue, initial) {\n // delay insert hooks for component root nodes, invoke them after the\n // element is really inserted\n if (isTrue(initial) && isDef(vnode.parent)) {\n vnode.parent.data.pendingInsert = queue\n } else {\n for (let i = 0; i < queue.length; ++i) {\n queue[i].data.hook.insert(queue[i])\n }\n }\n}\n```\n该函数会执行 `insert` 这个钩子函数，对于组件而言，`insert` 钩子函数的定义在 `src/core/vdom/create-component.js` 中的 `componentVNodeHooks` 中：\n\n```js\nconst componentVNodeHooks = {\n // ...\n insert (vnode: MountedComponentVNode) {\n const { context, componentInstance } = vnode\n if (!componentInstance._isMounted) {\n componentInstance._isMounted = true\n callHook(componentInstance, 'mounted')\n }\n // ...\n },\n}\n```\n我们可以看到，每个子组件都是在这个钩子函数中执行 `mounted` 钩子函数，并且我们之前分析过，`insertedVnodeQueue` 的添加顺序是先子后父，所以对于同步渲染的子组件而言，`mounted` 钩子函数的执行顺序也是先子后父。 \n\n## beforeUpdate & updated\n\n顾名思义，`beforeUpdate` 和 `updated` 的钩子函数执行时机都应该是在数据更新的时候，到目前为止，我们还没有分析 Vue 的数据双向绑定、更新相关，下一章我会详细介绍这个过程。\n\n`beforeUpdate` 的执行时机是在渲染 Watcher 的 `before` 函数中，我们刚才提到过：\n\n```js\nexport function mountComponent (\n vm: Component,\n el: ?Element,\n hydrating?: boolean\n): Component {\n // ...\n\n // we set this to vm._watcher inside the watcher's constructor\n // since the watcher's initial patch may call $forceUpdate (e.g. inside child\n // component's mounted hook), which relies on vm._watcher being already defined\n new Watcher(vm, updateComponent, noop, {\n before () {\n if (vm._isMounted) {\n callHook(vm, 'beforeUpdate')\n }\n }\n }, true /* isRenderWatcher */)\n // ...\n}\n\n```\n注意这里有个判断，也就是在组件已经 `mounted` 之后，才会去调用这个钩子函数。\n\n`update` 的执行时机是在`flushSchedulerQueue` 函数调用的时候，它的定义在 `src/core/observer/scheduler.js` 中：\n\n```js\nfunction flushSchedulerQueue () {\n // ...\n // 获取到 updatedQueue\n callUpdatedHooks(updatedQueue)\n}\n\nfunction callUpdatedHooks (queue) {\n let i = queue.length\n while (i--) {\n const watcher = queue[i]\n const vm = watcher.vm\n if (vm._watcher === watcher && vm._isMounted) {\n callHook(vm, 'updated')\n }\n }\n}\n```\n\n`flushSchedulerQueue` 函数我们之后会详细介绍，可以先大概了解一下，`updatedQueue` 是更新了的 `wathcer` 数组，那么在 `callUpdatedHooks` 函数中，它对这些数组做遍历，只有满足当前 `watcher` 为 `vm._watcher` 以及组件已经 `mounted` 这两个条件，才会执行 `updated` 钩子函数。\n\n我们之前提过，在组件 mount 的过程中，会实例化一个渲染的 `Watcher` 去监听 `vm` 上的数据变化重新渲染，这段逻辑发生在 `mountComponent` 函数执行的时候：\n\n```js\nexport function mountComponent (\n vm: Component,\n el: ?Element,\n hydrating?: boolean\n): Component {\n // ...\n // 这里是简写\n let updateComponent = () => {\n vm._update(vm._render(), hydrating)\n }\n new Watcher(vm, updateComponent, noop, {\n before () {\n if (vm._isMounted) {\n callHook(vm, 'beforeUpdate')\n }\n }\n }, true /* isRenderWatcher */)\n // ...\n}\n```\n那么在实例化 `Watcher` 的过程中，在它的构造函数里会判断 `isRenderWatcher`，接着把当前 `watcher` 的实例赋值给 `vm._watcher`，定义在 `src/core/observer/watcher.js` 中：\n\n```js\nexport default class Watcher {\n // ...\n constructor (\n vm: Component,\n expOrFn: string | Function,\n cb: Function,\n options?: ?Object,\n isRenderWatcher?: boolean\n ) {\n this.vm = vm\n if (isRenderWatcher) {\n vm._watcher = this\n }\n vm._watchers.push(this)\n // ...\n }\n}\n```\n\n同时，还把当前 `wathcer` 实例 push 到 `vm._watchers` 中，`vm._watcher` 是专门用来监听 `vm` 上数据变化然后重新渲染的，所以它是一个渲染相关的 `watcher`，因此在 `callUpdatedHooks` 函数中，只有 `vm._watcher` 的回调执行完毕后，才会执行 `updated` 钩子函数。\n\n## beforeDestroy & destroyed\n\n顾名思义，`beforeDestroy` 和 `destroyed` 钩子函数的执行时机在组件销毁的阶段，组件的销毁过程之后会详细介绍，最终会调用 `$destroy` 方法，它的定义在 `src/core/instance/lifecycle.js` 中：\n \n```js\nVue.prototype.$destroy = function () {\n const vm: Component = this\n if (vm._isBeingDestroyed) {\n return\n }\n callHook(vm, 'beforeDestroy')\n vm._isBeingDestroyed = true\n // remove self from parent\n const parent = vm.$parent\n if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {\n remove(parent.$children, vm)\n }\n // teardown watchers\n if (vm._watcher) {\n vm._watcher.teardown()\n }\n let i = vm._watchers.length\n while (i--) {\n vm._watchers[i].teardown()\n }\n // remove reference from data ob\n // frozen object may not have observer.\n if (vm._data.__ob__) {\n vm._data.__ob__.vmCount--\n }\n // call the last hook...\n vm._isDestroyed = true\n // invoke destroy hooks on current rendered tree\n vm.__patch__(vm._vnode, null)\n // fire destroyed hook\n callHook(vm, 'destroyed')\n // turn off all instance listeners.\n vm.$off()\n // remove __vue__ reference\n if (vm.$el) {\n vm.$el.__vue__ = null\n }\n // release circular reference (#6759)\n if (vm.$vnode) {\n vm.$vnode.parent = null\n }\n }\n```\n`beforeDestroy` 钩子函数的执行时机是在 `$destroy` 函数执行最开始的地方，接着执行了一系列的销毁动作，包括从 `parent` 的 `$children` 中删掉自身，删除 `watcher`，当前渲染的 VNode 执行销毁钩子函数等，执行完毕后再调用 `destroy` 钩子函数。\n\n在 `$destroy` 的执行过程中，它又会执行 ` vm.__patch__(vm._vnode, null)` 触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 `destroy` 钩子函数执行顺序是先子后父，和 `mounted` 过程一样。\n\n## activated & deactivated\n\n`activated` 和 `deactivated` 钩子函数是专门为 `keep-alive` 组件定制的钩子，我们会在介绍 `keep-alive` 组件的时候详细介绍，这里先留个悬念。\n\n## 总结\n\n这一节主要介绍了 Vue 生命周期中各个钩子函数的执行时机以及顺序，通过分析，我们知道了如在 `created` 钩子函数中可以访问到数据，在 `mounted` 钩子函数中可以访问到 DOM，在 `destroy` 钩子函数中可以做一些定时器销毁工作，了解它们有利于我们在合适的生命周期去做不同的事情。\n\n" }, { "path": "docs/v2/components/merge-option.md", "content": "# 合并配置\n\n通过之前章节的源码分析我们知道，`new Vue` 的过程通常有 2 种场景，一种是外部我们的代码主动调用 `new Vue(options)` 的方式实例化一个 Vue 对象；另一种是我们上一节分析的组件过程中内部通过 `new Vue(options)` 实例化子组件。\n\n无论哪种场景，都会执行实例的 `_init(options)` 方法，它首先会执行一个 ` merge options` 的逻辑，相关的代码在 `src/core/instance/init.js` 中：\n\n```js\nVue.prototype._init = function (options?: Object) {\n // merge options\n if (options && options._isComponent) {\n // optimize internal component instantiation\n // since dynamic options merging is pretty slow, and none of the\n // internal component options needs special treatment.\n initInternalComponent(vm, options)\n } else {\n vm.$options = mergeOptions(\n resolveConstructorOptions(vm.constructor),\n options || {},\n vm\n )\n }\n // ...\n}\n```\n\n可以看到不同场景对于 `options` 的合并逻辑是不一样的，并且传入的 `options` 值也有非常大的不同，接下来我会分开介绍 2 种场景的 options 合并过程。\n\n为了更直观，我们可以举个简单的示例：\n\n```js\nimport Vue from 'vue'\n\nlet childComp = {\n template: '
{{msg}}
',\n created() {\n console.log('child created')\n },\n mounted() {\n console.log('child mounted')\n },\n data() {\n return {\n msg: 'Hello Vue'\n }\n }\n}\n\nVue.mixin({\n created() {\n console.log('parent created')\n }\n})\n\nlet app = new Vue({\n el: '#app',\n render: h => h(childComp)\n})\n```\n\n## 外部调用场景\n\n当执行 `new Vue` 的时候，在执行 `this._init(options)` 的时候，就会执行如下逻辑去合并 `options`：\n\n```js\nvm.$options = mergeOptions(\n resolveConstructorOptions(vm.constructor),\n options || {},\n vm\n)\n```\n\n这里通过调用 `mergeOptions` 方法来合并，它实际上就是把 `resolveConstructorOptions(vm.constructor)` 的返回值和 `options` 做合并，`resolveConstructorOptions` 的实现先不考虑，在我们这个场景下，它还是简单返回 `vm.constructor.options`，相当于 `Vue.options`，那么这个值又是什么呢，其实在 `initGlobalAPI(Vue)` 的时候定义了这个值，代码在 `src/core/global-api/index.js` 中：\n\n```js\nexport function initGlobalAPI (Vue: GlobalAPI) {\n // ...\n Vue.options = Object.create(null)\n ASSET_TYPES.forEach(type => {\n Vue.options[type + 's'] = Object.create(null)\n })\n\n // this is used to identify the \"base\" constructor to extend all plain-object\n // components with in Weex's multi-instance scenarios.\n Vue.options._base = Vue\n\n extend(Vue.options.components, builtInComponents)\n // ...\n}\n```\n首先通过 `Vue.options = Object.create(null)` 创建一个空对象，然后遍历 `ASSET_TYPES`，`ASSET_TYPES` 的定义在 `src/shared/constants.js` 中：\n\n```js\nexport const ASSET_TYPES = [\n 'component',\n 'directive',\n 'filter'\n]\n```\n\n所以上面遍历 `ASSET_TYPES` 后的代码相当于：\n\n```js\nVue.options.components = {}\nVue.options.directives = {}\nVue.options.filters = {}\n```\n接着执行了 `Vue.options._base = Vue`，它的作用在我们上节实例化子组件的时候介绍了。\n\n最后通过 `extend(Vue.options.components, builtInComponents)` 把一些内置组件扩展到 `Vue.options.components` 上，Vue 的内置组件目前有 ``、`` 和 `` 组件，这也就是为什么我们在其它组件中使用 `` 组件不需要注册的原因，这块儿后续我们介绍 `` 组件的时候会详细讲。\n\n那么回到 `mergeOptions` 这个函数，它的定义在 `src/core/util/options.js` 中：\n\n```js\n/**\n * Merge two option objects into a new one.\n * Core utility used in both instantiation and inheritance.\n */\nexport function mergeOptions (\n parent: Object,\n child: Object,\n vm?: Component\n): Object {\n if (process.env.NODE_ENV !== 'production') {\n checkComponents(child)\n }\n\n if (typeof child === 'function') {\n child = child.options\n }\n\n normalizeProps(child, vm)\n normalizeInject(child, vm)\n normalizeDirectives(child)\n const extendsFrom = child.extends\n if (extendsFrom) {\n parent = mergeOptions(parent, extendsFrom, vm)\n }\n if (child.mixins) {\n for (let i = 0, l = child.mixins.length; i < l; i++) {\n parent = mergeOptions(parent, child.mixins[i], vm)\n }\n }\n const options = {}\n let key\n for (key in parent) {\n mergeField(key)\n }\n for (key in child) {\n if (!hasOwn(parent, key)) {\n mergeField(key)\n }\n }\n function mergeField (key) {\n const strat = strats[key] || defaultStrat\n options[key] = strat(parent[key], child[key], vm, key)\n }\n return options\n}\n```\n\n`mergeOptions` 主要功能就是把 `parent` 和 `child` 这两个对象根据一些合并策略，合并成一个新对象并返回。比较核心的几步，先递归把 `extends` 和 `mixins` 合并到 `parent` 上，然后遍历 `parent`，调用 `mergeField`，然后再遍历 `child`，如果 `key` 不在 `parent` 的自身属性上，则调用 `mergeField`。\n\n这里有意思的是 `mergeField` 函数，它对不同的 `key` 有着不同的合并策略。举例来说，对于生命周期函数，它的合并策略是这样的：\n\n```js\nfunction mergeHook (\n parentVal: ?Array,\n childVal: ?Function | ?Array\n): ?Array {\n return childVal\n ? parentVal\n ? parentVal.concat(childVal)\n : Array.isArray(childVal)\n ? childVal\n : [childVal]\n : parentVal\n}\n\nLIFECYCLE_HOOKS.forEach(hook => {\n strats[hook] = mergeHook\n})\n```\n这其中的 `LIFECYCLE_HOOKS` 的定义在 `src/shared/constants.js` 中：\n\n```js\nexport const LIFECYCLE_HOOKS = [\n 'beforeCreate',\n 'created',\n 'beforeMount',\n 'mounted',\n 'beforeUpdate',\n 'updated',\n 'beforeDestroy',\n 'destroyed',\n 'activated',\n 'deactivated',\n 'errorCaptured'\n]\n```\n这里定义了 Vue.js 所有的钩子函数名称，所以对于钩子函数，他们的合并策略都是 `mergeHook` 函数。这个函数的实现也非常有意思，用了一个多层 3 元运算符，逻辑就是如果不存在 `childVal` ，就返回 `parentVal`；否则再判断是否存在 `parentVal`，如果存在就把 `childVal` 添加到 `parentVal` 后返回新数组；否则返回 `childVal` 的数组。所以回到 `mergeOptions` 函数，一旦 `parent` 和 `child` 都定义了相同的钩子函数，那么它们会把 2 个钩子函数合并成一个数组。\n\n关于其它属性的合并策略的定义都可以在 `src/core/util/options.js` 文件中看到，这里不一一介绍了，感兴趣的同学可以自己看。\n\n通过执行 `mergeField` 函数，把合并后的结果保存到 `options` 对象中，最终返回它。\n\n因此，在我们当前这个 case 下，执行完如下合并后：\n```js\nvm.$options = mergeOptions(\n resolveConstructorOptions(vm.constructor),\n options || {},\n vm\n)\n```\n`vm.$options` 的值差不多是如下这样：\n\n```js\nvm.$options = {\n components: { },\n created: [\n function created() {\n console.log('parent created')\n }\n ],\n directives: { },\n filters: { },\n _base: function Vue(options) {\n // ...\n },\n el: \"#app\",\n render: function (h) {\n //...\n }\n}\n```\n\n## 组件场景\n\n由于组件的构造函数是通过 `Vue.extend` 继承自 `Vue` 的，先回顾一下这个过程，代码定义在 `src/core/global-api/extend.js` 中。\n\n```js\n/**\n * Class inheritance\n */\nVue.extend = function (extendOptions: Object): Function {\n // ...\n Sub.options = mergeOptions(\n Super.options,\n extendOptions\n )\n\n // ...\n // keep a reference to the super options at extension time.\n // later at instantiation we can check if Super's options have\n // been updated.\n Sub.superOptions = Super.options\n Sub.extendOptions = extendOptions\n Sub.sealedOptions = extend({}, Sub.options)\n\n // ...\n return Sub\n}\n```\n我们只保留关键逻辑，这里的 `extendOptions` 对应的就是前面定义的组件对象，它会和 `Vue.options` 合并到 `Sub.opitons` 中。\n\n接下来我们再回忆一下子组件的初始化过程，代码定义在 `src/core/vdom/create-component.js` 中：\n\n```js\nexport function createComponentInstanceForVnode (\n vnode: any, // we know it's MountedComponentVNode but flow doesn't\n parent: any, // activeInstance in lifecycle state\n): Component {\n const options: InternalComponentOptions = {\n _isComponent: true,\n _parentVnode: vnode,\n parent\n }\n // ...\n return new vnode.componentOptions.Ctor(options)\n}\n```\n\n这里的 `vnode.componentOptions.Ctor` 就是指向 `Vue.extend` 的返回值 `Sub`， 所以 执行 `new vnode.componentOptions.Ctor(options)` 接着执行 `this._init(options)`，因为 `options._isComponent` 为 true，那么合并 `options` 的过程走到了 ` initInternalComponent(vm, options)` 逻辑。先来看一下它的代码实现，在 `src/core/instance/init.js` 中：\n\n```js\nexport function initInternalComponent (vm: Component, options: InternalComponentOptions) {\n const opts = vm.$options = Object.create(vm.constructor.options)\n // doing this because it's faster than dynamic enumeration.\n const parentVnode = options._parentVnode\n opts.parent = options.parent\n opts._parentVnode = parentVnode\n\n const vnodeComponentOptions = parentVnode.componentOptions\n opts.propsData = vnodeComponentOptions.propsData\n opts._parentListeners = vnodeComponentOptions.listeners\n opts._renderChildren = vnodeComponentOptions.children\n opts._componentTag = vnodeComponentOptions.tag\n\n if (options.render) {\n opts.render = options.render\n opts.staticRenderFns = options.staticRenderFns\n }\n}\n```\n\n`initInternalComponent` 方法首先执行 `const opts = vm.$options = Object.create(vm.constructor.options)`，这里的 `vm.constructor` 就是子组件的构造函数 `Sub`，相当于 `vm.$options = Object.create(Sub.options)`。\n\n接着又把实例化子组件传入的子组件父 VNode 实例 `parentVnode`、子组件的父 Vue 实例 `parent` 保存到 `vm.$options` 中，另外还保留了 `parentVnode` 配置中的如 `propsData` 等其它的属性。\n\n这么看来，`initInternalComponent` 只是做了简单一层对象赋值，并不涉及到递归、合并策略等复杂逻辑。\n\n因此，在我们当前这个 case 下，执行完如下合并后：\n\n```js\ninitInternalComponent(vm, options)\n```\n\n`vm.$options` 的值差不多是如下这样：\n\n```js\nvm.$options = {\n parent: Vue /*父Vue实例*/,\n propsData: undefined,\n _componentTag: undefined,\n _parentVnode: VNode /*父VNode实例*/,\n _renderChildren:undefined,\n __proto__: {\n components: { },\n directives: { },\n filters: { },\n _base: function Vue(options) {\n //...\n },\n _Ctor: {},\n created: [\n function created() {\n console.log('parent created')\n }, function created() {\n console.log('child created')\n }\n ],\n mounted: [\n function mounted() {\n console.log('child mounted')\n }\n ],\n data() {\n return {\n msg: 'Hello Vue'\n }\n },\n template: '
{{msg}}
'\n }\n}\n```\n\n## 总结\n\n那么至此，Vue 初始化阶段对于 `options` 的合并过程就介绍完了，我们需要知道对于 `options` 的合并有 2 种方式，子组件初始化过程通过 `initInternalComponent` 方式要比外部初始化 Vue 通过 `mergeOptions` 的过程要快，合并完的结果保留在 `vm.$options` 中。\n\n纵观一些库、框架的设计几乎都是类似的，自身定义了一些默认配置，同时又可以在初始化阶段传入一些定义配置，然后去 merge 默认配置，来达到定制化不同需求的目的。只不过在 Vue 的场景下，会对 merge 的过程做一些精细化控制，虽然我们在开发自己的 JSSDK 的时候并没有 Vue 这么复杂，但这个设计思想是值得我们借鉴的。\n\n\n" }, { "path": "docs/v2/components/patch.md", "content": "# patch\n\n通过前一章的分析我们知道，当我们通过 `createComponent` 创建了组件 VNode，接下来会走到 `vm._update`，执行 `vm.__patch__` 去把 VNode 转换成真正的 DOM 节点。这个过程我们在前一章已经分析过了，但是针对一个普通的 VNode 节点，接下来我们来看看组件的 VNode 会有哪些不一样的地方。\n\npatch 的过程会调用 `createElm` 创建元素节点，回顾一下 `createElm` 的实现，它的定义在 `src/core/vdom/patch.js` 中：\n\n```js\nfunction createElm (\n vnode,\n insertedVnodeQueue,\n parentElm,\n refElm,\n nested,\n ownerArray,\n index\n) {\n // ...\n if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {\n return\n }\n // ...\n}\n```\n\n## createComponent\n\n我们删掉多余的代码，只保留关键的逻辑，这里会判断 `createComponent(vnode, insertedVnodeQueue, parentElm, refElm)` 的返回值，如果为 `true` 则直接结束，那么接下来看一下 `createComponent` 方法的实现：\n\n```js\nfunction createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {\n let i = vnode.data\n if (isDef(i)) {\n const isReactivated = isDef(vnode.componentInstance) && i.keepAlive\n if (isDef(i = i.hook) && isDef(i = i.init)) {\n i(vnode, false /* hydrating */)\n }\n // after calling the init hook, if the vnode is a child component\n // it should've created a child instance and mounted it. the child\n // component also has set the placeholder vnode's elm.\n // in that case we can just return the element and be done.\n if (isDef(vnode.componentInstance)) {\n initComponent(vnode, insertedVnodeQueue)\n insert(parentElm, vnode.elm, refElm)\n if (isTrue(isReactivated)) {\n reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)\n }\n return true\n }\n }\n}\n```\n\n`createComponent` 函数中，首先对 `vnode.data` 做了一些判断：\n\n```js\nlet i = vnode.data\nif (isDef(i)) {\n // ...\n if (isDef(i = i.hook) && isDef(i = i.init)) {\n i(vnode, false /* hydrating */)\n // ...\n }\n // ..\n}\n```\n\n如果 `vnode` 是一个组件 VNode，那么条件会满足，并且得到 `i` 就是 `init` 钩子函数，回顾上节我们在创建组件 VNode 的时候合并钩子函数中就包含 `init` 钩子函数，定义在 `src/core/vdom/create-component.js` 中：\n\n```js\ninit (vnode: VNodeWithData, hydrating: boolean): ?boolean {\n if (\n vnode.componentInstance &&\n !vnode.componentInstance._isDestroyed &&\n vnode.data.keepAlive\n ) {\n // kept-alive components, treat as a patch\n const mountedNode: any = vnode // work around flow\n componentVNodeHooks.prepatch(mountedNode, mountedNode)\n } else {\n const child = vnode.componentInstance = createComponentInstanceForVnode(\n vnode,\n activeInstance\n )\n child.$mount(hydrating ? vnode.elm : undefined, hydrating)\n }\n},\n```\n\n`init` 钩子函数执行也很简单，我们先不考虑 `keepAlive` 的情况，它是通过 `createComponentInstanceForVnode` 创建一个 Vue 的实例，然后调用 `$mount` 方法挂载子组件，\n先来看一下 `createComponentInstanceForVnode` 的实现：\n\n```js\nexport function createComponentInstanceForVnode (\n vnode: any, // we know it's MountedComponentVNode but flow doesn't\n parent: any, // activeInstance in lifecycle state\n): Component {\n const options: InternalComponentOptions = {\n _isComponent: true,\n _parentVnode: vnode,\n parent\n }\n // check inline-template render functions\n const inlineTemplate = vnode.data.inlineTemplate\n if (isDef(inlineTemplate)) {\n options.render = inlineTemplate.render\n options.staticRenderFns = inlineTemplate.staticRenderFns\n }\n return new vnode.componentOptions.Ctor(options)\n}\n```\n\n`createComponentInstanceForVnode` 函数构造的一个内部组件的参数，然后执行 `new vnode.componentOptions.Ctor(options)`。这里的 `vnode.componentOptions.Ctor` 对应的就是子组件的构造函数，我们上一节分析了它实际上是继承于 Vue 的一个构造器 `Sub`，相当于 `new Sub(options)` 这里有几个关键参数要注意几个点，`_isComponent` 为 `true` 表示它是一个组件，`parent` 表示当前激活的组件实例（注意，这里比较有意思的是如何拿到组件实例，后面会介绍。\n\n所以子组件的实例化实际上就是在这个时机执行的，并且它会执行实例的 `_init` 方法，这个过程有一些和之前不同的地方需要挑出来说，代码在 `src/core/instance/init.js` 中：\n\n```js\nVue.prototype._init = function (options?: Object) {\n const vm: Component = this\n // merge options\n if (options && options._isComponent) {\n // optimize internal component instantiation\n // since dynamic options merging is pretty slow, and none of the\n // internal component options needs special treatment.\n initInternalComponent(vm, options)\n } else {\n vm.$options = mergeOptions(\n resolveConstructorOptions(vm.constructor),\n options || {},\n vm\n )\n }\n // ...\n if (vm.$options.el) {\n vm.$mount(vm.$options.el)\n } \n}\n```\n\n这里首先是合并 `options` 的过程有变化，`_isComponent` 为 true，所以走到了 `initInternalComponent` 过程，这个函数的实现也简单看一下：\n\n```js\nexport function initInternalComponent (vm: Component, options: InternalComponentOptions) {\n const opts = vm.$options = Object.create(vm.constructor.options)\n // doing this because it's faster than dynamic enumeration.\n const parentVnode = options._parentVnode\n opts.parent = options.parent\n opts._parentVnode = parentVnode\n\n const vnodeComponentOptions = parentVnode.componentOptions\n opts.propsData = vnodeComponentOptions.propsData\n opts._parentListeners = vnodeComponentOptions.listeners\n opts._renderChildren = vnodeComponentOptions.children\n opts._componentTag = vnodeComponentOptions.tag\n\n if (options.render) {\n opts.render = options.render\n opts.staticRenderFns = options.staticRenderFns\n }\n}\n```\n这个过程我们重点记住以下几个点即可：`opts.parent = options.parent`、`opts._parentVnode = parentVnode`，它们是把之前我们通过 `createComponentInstanceForVnode` 函数传入的几个参数合并到内部的选项 `$options` 里了。\n\n再来看一下 `_init` 函数最后执行的代码：\n\n```js\nif (vm.$options.el) {\n vm.$mount(vm.$options.el)\n}\n```\n由于组件初始化的时候是不传 el 的，因此组件是自己接管了 `$mount` 的过程，这个过程的主要流程在上一章介绍过了，回到组件 `init` 的过程，`componentVNodeHooks` 的 `init` 钩子函数，在完成实例化的 `_init` 后，接着会执行 `child.$mount(hydrating ? vnode.elm : undefined, hydrating)` 。这里 `hydrating` 为 true 一般是服务端渲染的情况，我们只考虑客户端渲染，所以这里 `$mount` 相当于执行 `child.$mount(undefined, false)`，它最终会调用 `mountComponent` 方法，进而执行 `vm._render()` 方法：\n\n```js\nVue.prototype._render = function (): VNode {\n const vm: Component = this\n const { render, _parentVnode } = vm.$options\n\n \n // set parent vnode. this allows render functions to have access\n // to the data on the placeholder node.\n vm.$vnode = _parentVnode\n // render self\n let vnode\n try {\n vnode = render.call(vm._renderProxy, vm.$createElement)\n } catch (e) {\n // ...\n }\n // set parent\n vnode.parent = _parentVnode\n return vnode\n}\n```\n\n我们只保留关键部分的代码，这里的 `_parentVnode` 就是当前组件的父 VNode，而 `render` 函数生成的 `vnode` 当前组件的渲染 `vnode`，`vnode` 的 `parent` 指向了 `_parentVnode`，也就是 `vm.$vnode`，它们是一种父子的关系。\n\n我们知道在执行完 `vm._render` 生成 VNode 后，接下来就要执行 `vm._update` 去渲染 VNode 了。来看一下组件渲染的过程中有哪些需要注意的，`vm._update` 的定义在 `src/core/instance/lifecycle.js` 中：\n\n```js\nexport let activeInstance: any = null\nVue.prototype._update = function (vnode: VNode, hydrating?: boolean) {\n const vm: Component = this\n const prevEl = vm.$el\n const prevVnode = vm._vnode\n const prevActiveInstance = activeInstance\n activeInstance = vm\n vm._vnode = vnode\n // Vue.prototype.__patch__ is injected in entry points\n // based on the rendering backend used.\n if (!prevVnode) {\n // initial render\n vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)\n } else {\n // updates\n vm.$el = vm.__patch__(prevVnode, vnode)\n }\n activeInstance = prevActiveInstance\n // update __vue__ reference\n if (prevEl) {\n prevEl.__vue__ = null\n }\n if (vm.$el) {\n vm.$el.__vue__ = vm\n }\n // if parent is an HOC, update its $el as well\n if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {\n vm.$parent.$el = vm.$el\n }\n // updated hook is called by the scheduler to ensure that children are\n // updated in a parent's updated hook.\n}\n```\n`_update` 过程中有几个关键的代码，首先 `vm._vnode = vnode` 的逻辑，这个 `vnode` 是通过 `vm._render()` 返回的组件渲染 VNode，`vm._vnode` 和 `vm.$vnode` 的关系就是一种父子关系，用代码表达就是 `vm._vnode.parent === vm.$vnode`。还有一段比较有意思的代码：\n\n```js\nexport let activeInstance: any = null\nVue.prototype._update = function (vnode: VNode, hydrating?: boolean) {\n // ...\n const prevActiveInstance = activeInstance\n activeInstance = vm\n if (!prevVnode) {\n // initial render\n vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)\n } else {\n // updates\n vm.$el = vm.__patch__(prevVnode, vnode)\n }\n activeInstance = prevActiveInstance\n // ...\n}\n\n```\n这个 `activeInstance` 作用就是保持当前上下文的 Vue 实例，它是在 `lifecycle` 模块的全局变量，定义是 `export let activeInstance: any = null`，并且在之前我们调用 `createComponentInstanceForVnode` 方法的时候从 `lifecycle` 模块获取，并且作为参数传入的。因为实际上 JavaScript 是一个单线程，Vue 整个初始化是一个深度遍历的过程，在实例化子组件的过程中，它需要知道当前上下文的 Vue 实例是什么，并把它作为子组件的父 Vue 实例。之前我们提到过对子组件的实例化过程先会调用 `initInternalComponent(vm, options)` 合并 `options`，把 `parent` 存储在 `vm.$options` 中，在 `$mount` 之前会调用 `initLifecycle(vm)` 方法：\n\n```js\nexport function initLifecycle (vm: Component) {\n const options = vm.$options\n\n // locate first non-abstract parent\n let parent = options.parent\n if (parent && !options.abstract) {\n while (parent.$options.abstract && parent.$parent) {\n parent = parent.$parent\n }\n parent.$children.push(vm)\n }\n\n vm.$parent = parent\n // ...\n}\n```\n可以看到 `vm.$parent` 就是用来保留当前 `vm` 的父实例，并且通过 `parent.$children.push(vm)` 来把当前的 `vm` 存储到父实例的 `$children` 中。\n\n在 `vm._update` 的过程中，把当前的 `vm` 赋值给 `activeInstance`，同时通过 `const prevActiveInstance = activeInstance` 用 `prevActiveInstance` 保留上一次的 `activeInstance`。实际上，`prevActiveInstance` 和当前的 `vm` 是一个父子关系，当一个 `vm` 实例完成它的所有子树的 patch 或者 update 过程后，`activeInstance` 会回到它的父实例，这样就完美地保证了 `createComponentInstanceForVnode` 整个深度遍历过程中，我们在实例化子组件的时候能传入当前子组件的父 Vue 实例，并在 `_init` 的过程中，通过 `vm.$parent` 把这个父子关系保留。\n\n那么回到 `_update`，最后就是调用 `__patch__` 渲染 VNode 了。\n\n```js\nvm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)\n \nfunction patch (oldVnode, vnode, hydrating, removeOnly) {\n // ...\n let isInitialPatch = false\n const insertedVnodeQueue = []\n\n if (isUndef(oldVnode)) {\n // empty mount (likely as component), create new root element\n isInitialPatch = true\n createElm(vnode, insertedVnodeQueue)\n } else {\n // ...\n }\n // ...\n}\n\n```\n\n这里又回到了本节开始的过程，之前分析过负责渲染成 DOM 的函数是 `createElm`，注意这里我们只传了 2 个参数，所以对应的 `parentElm` 是 `undefined`。我们再来看看它的定义：\n\n```js\nfunction createElm (\n vnode,\n insertedVnodeQueue,\n parentElm,\n refElm,\n nested,\n ownerArray,\n index\n) {\n // ...\n if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {\n return\n }\n\n const data = vnode.data\n const children = vnode.children\n const tag = vnode.tag\n if (isDef(tag)) {\n // ...\n\n vnode.elm = vnode.ns\n ? nodeOps.createElementNS(vnode.ns, tag)\n : nodeOps.createElement(tag, vnode)\n setScope(vnode)\n\n /* istanbul ignore if */\n if (__WEEX__) {\n // ...\n } else {\n createChildren(vnode, children, insertedVnodeQueue)\n if (isDef(data)) {\n invokeCreateHooks(vnode, insertedVnodeQueue)\n }\n insert(parentElm, vnode.elm, refElm)\n }\n \n // ...\n } else if (isTrue(vnode.isComment)) {\n vnode.elm = nodeOps.createComment(vnode.text)\n insert(parentElm, vnode.elm, refElm)\n } else {\n vnode.elm = nodeOps.createTextNode(vnode.text)\n insert(parentElm, vnode.elm, refElm)\n }\n}\n```\n注意，这里我们传入的 `vnode` 是组件渲染的 `vnode`，也就是我们之前说的 `vm._vnode`，如果组件的根节点是个普通元素，那么 `vm._vnode` 也是普通的 `vnode`，这里 `createComponent(vnode, insertedVnodeQueue, parentElm, refElm)` 的返回值是 false。接下来的过程就和我们上一章一样了，先创建一个父节点占位符，然后再遍历所有子 VNode 递归调用 `createElm`，在遍历的过程中，如果遇到子 VNode 是一个组件的 VNode，则重复本节开始的过程，这样通过一个递归的方式就可以完整地构建了整个组件树。\n\n由于我们这个时候传入的 `parentElm` 是空，所以对组件的插入，在 `createComponent` 有这么一段逻辑：\n\n```js\nfunction createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {\n let i = vnode.data\n if (isDef(i)) {\n // ....\n if (isDef(i = i.hook) && isDef(i = i.init)) {\n i(vnode, false /* hydrating */)\n }\n // ...\n if (isDef(vnode.componentInstance)) {\n initComponent(vnode, insertedVnodeQueue)\n insert(parentElm, vnode.elm, refElm)\n if (isTrue(isReactivated)) {\n reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)\n }\n return true\n }\n }\n}\n```\n\n在完成组件的整个 `patch` 过程后，最后执行 `insert(parentElm, vnode.elm, refElm)` 完成组件的 DOM 插入，如果组件 `patch` 过程中又创建了子组件，那么DOM 的插入顺序是先子后父。\n\n## 总结\n\n那么到此，一个组件的 VNode 是如何创建、初始化、渲染的过程也就介绍完毕了。在对组件化的实现有一个大概了解后，接下来我们来介绍一下这其中的一些细节。我们知道编写一个组件实际上是编写一个 JavaScript 对象，对象的描述就是各种配置，之前我们提到在 `_init` 的最初阶段执行的就是 `merge options` 的逻辑，那么下一节我们从源码角度来分析合并配置的过程。\n\n\n\n\n\n\n\n \n \n" }, { "path": "docs/v2/data-driven/create-element.md", "content": "# createElement\n\nVue.js 利用 createElement 方法创建 VNode，它定义在 `src/core/vdom/create-element.js` 中：\n\n```js\n// wrapper function for providing a more flexible interface\n// without getting yelled at by flow\nexport function createElement (\n context: Component,\n tag: any,\n data: any,\n children: any,\n normalizationType: any,\n alwaysNormalize: boolean\n): VNode | Array {\n if (Array.isArray(data) || isPrimitive(data)) {\n normalizationType = children\n children = data\n data = undefined\n }\n if (isTrue(alwaysNormalize)) {\n normalizationType = ALWAYS_NORMALIZE\n }\n return _createElement(context, tag, data, children, normalizationType)\n}\n```\n\n`createElement` 方法实际上是对 `_createElement` 方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建 VNode 的函数 `_createElement`：\n\n```js\nexport function _createElement (\n context: Component,\n tag?: string | Class | Function | Object,\n data?: VNodeData,\n children?: any,\n normalizationType?: number\n): VNode | Array {\n if (isDef(data) && isDef((data: any).__ob__)) {\n process.env.NODE_ENV !== 'production' && warn(\n `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\\n` +\n 'Always create fresh vnode data objects in each render!',\n context\n )\n return createEmptyVNode()\n }\n // object syntax in v-bind\n if (isDef(data) && isDef(data.is)) {\n tag = data.is\n }\n if (!tag) {\n // in case of component :is set to falsy value\n return createEmptyVNode()\n }\n // warn against non-primitive key\n if (process.env.NODE_ENV !== 'production' &&\n isDef(data) && isDef(data.key) && !isPrimitive(data.key)\n ) {\n if (!__WEEX__ || !('@binding' in data.key)) {\n warn(\n 'Avoid using non-primitive value as key, ' +\n 'use string/number value instead.',\n context\n )\n }\n }\n // support single function children as default scoped slot\n if (Array.isArray(children) &&\n typeof children[0] === 'function'\n ) {\n data = data || {}\n data.scopedSlots = { default: children[0] }\n children.length = 0\n }\n if (normalizationType === ALWAYS_NORMALIZE) {\n children = normalizeChildren(children)\n } else if (normalizationType === SIMPLE_NORMALIZE) {\n children = simpleNormalizeChildren(children)\n }\n let vnode, ns\n if (typeof tag === 'string') {\n let Ctor\n ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)\n if (config.isReservedTag(tag)) {\n // platform built-in elements\n vnode = new VNode(\n config.parsePlatformTagName(tag), data, children,\n undefined, undefined, context\n )\n } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {\n // component\n vnode = createComponent(Ctor, data, context, children, tag)\n } else {\n // unknown or unlisted namespaced elements\n // check at runtime because it may get assigned a namespace when its\n // parent normalizes children\n vnode = new VNode(\n tag, data, children,\n undefined, undefined, context\n )\n }\n } else {\n // direct component options / constructor\n vnode = createComponent(tag, data, context, children)\n }\n if (Array.isArray(vnode)) {\n return vnode\n } else if (isDef(vnode)) {\n if (isDef(ns)) applyNS(vnode, ns)\n if (isDef(data)) registerDeepBindings(data)\n return vnode\n } else {\n return createEmptyVNode()\n }\n}\n```\n\n`_createElement` 方法有 5 个参数，`context` 表示 VNode 的上下文环境，它是 `Component` 类型；`tag` 表示标签，它可以是一个字符串，也可以是一个 `Component`；`data` 表示 VNode 的数据，它是一个 `VNodeData` 类型，可以在 `flow/vnode.js` 中找到它的定义，这里先不展开说；`children` 表示当前 VNode 的子节点，它是任意类型的，它接下来需要被规范为标准的 VNode 数组；`normalizationType` 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 `render` 函数是编译生成的还是用户手写的。\n\n`createElement` 函数的流程略微有点多，我们接下来主要分析 2 个重点的流程 —— `children` 的规范化以及 VNode 的创建。\n\n## children 的规范化\n\n由于 Virtual DOM 实际上是一个树状结构，每一个 VNode 可能会有若干个子节点，这些子节点应该也是 VNode 的类型。`_createElement` 接收的第 4 个参数 children 是任意类型的，因此我们需要把它们规范成 VNode 类型。\n\n这里根据 `normalizationType` 的不同，调用了 `normalizeChildren(children)` 和 `simpleNormalizeChildren(children)` 方法，它们的定义都在 `src/core/vdom/helpers/normalzie-children.js` 中：\n\n```js\n// The template compiler attempts to minimize the need for normalization by\n// statically analyzing the template at compile time.\n//\n// For plain HTML markup, normalization can be completely skipped because the\n// generated render function is guaranteed to return Array. There are\n// two cases where extra normalization is needed:\n\n// 1. When the children contains components - because a functional component\n// may return an Array instead of a single root. In this case, just a simple\n// normalization is needed - if any child is an Array, we flatten the whole\n// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep\n// because functional components already normalize their own children.\nexport function simpleNormalizeChildren (children: any) {\n for (let i = 0; i < children.length; i++) {\n if (Array.isArray(children[i])) {\n return Array.prototype.concat.apply([], children)\n }\n }\n return children\n}\n\n// 2. When the children contains constructs that always generated nested Arrays,\n// e.g.