[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 ~~~