[TOC] ***** ## web-runtime-with-compiler web运行编译时 >[info] import ~~~ ;(导入)编译运行时 import config from 'core/config' import { warn, cached } from 'core/util/index' import { query } from 'web/util/index' import Vue from './web-runtime' import { compileToFunctions } from './web-compiler' ~~~ >[info] module ~~~ ;获取元素模板 const idToTemplate = cached(id => query(id).innerHTML) ;保存mount接口 const mount = Vue.prototype.$mount ;编译运行时$mount修正 Vue.prototype.$mount = function (el) { ;获取元素 el = el && query(el) ;选项 const options = this.$options ;检查是否包含渲染选项 if (!options.render) { ;获取模板选项 let template = options.template ;检查是否已包含模板 if (template) { if (typeof template === 'string') { if (template.charAt(0) === '#') { template = idToTemplate(template) } } else if (template.nodeType) { template = template.innerHTML } else { warn('invalid template option:' + template, this) } } else if (el) { ;生成模板 template = getOuterHTML(el) } ;检查模板 if (template) { ;生成render,staticRenderFns函数 const { render, staticRenderFns } = compileToFunctions(template, { preserveWhitespace: config.preserveWhitespace, delimiters: options.delimiters }) ;挂载到options options.render = render options.staticRenderFns = staticRenderFns } } ;调用原生mount函数实现挂载 mount.call(this, el) } ;获取el的模板 function getOuterHTML (el) { if (el.outerHTML) { return el.outerHTML } else { const container = document.createElement('div') container.appendChild(el.cloneNode(true)) return container.innerHTML } } ;编译入口 Vue.compile = compileToFunctions ;编译运行时Vue export default Vue ~~~ >[info] export ~~~ ;(导出)编译运行时Vue export default Vue ~~~