关于mount挂载函数
代码路径: src/platforms/web/entry-runtime-with-compiler.js
/* @flow */
import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'
import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'
const idToTemplate = cached(id => {
const el = query(id)
return el && el.innerHTML
})
// 生命周期部分开始用这个源码的库🚀
// 缓存了原型上的 $mount 方法
const mount = Vue.prototype.$mount
// 重新定义该方法
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean // 第二个参数是和服务端渲染相关
): Component {
// 根据传入的el参数获取DOM元素;🚀
el = el && query(el)// 工具函数 如果它还不是元素,则查询元素选择器div包装。
/* istanbul ignore if */
// 判断获取到el对应的DOM元素如果是body或html元素时,将会抛出警告
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
// 如果没有render方法,用户没有手写render函数的情况下获取传入的模板template🚀
if (!options.render) {
let template = options.template
// 如果有template
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
// 调用idToTemplate函数获取到选择符对应的DOM元素的innerHTML作为模板🚀
template = idToTemplate(template)
/* istanbul ignore if */
}
} else if (template.nodeType) { // 判断它是不是一个DOM元素
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
// 如果没有template就用el 🚀
} else if (el) {
template = getOuterHTML(el) // 获取外部模板
}
// 以上函数都会有template
// 获取到模板之后,接下来要做的事就是将其编译成渲染函数🚀
if (template) {
/* istanbul ignore if */
const { render, staticRenderFns } = compileToFunctions(template, { // 把模板编译成渲染函数🚀
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
// 该函数接收 待编译的模板字符串template 和编译选项shouldDecodeNewlines这些 作为参数 🚀
// 返回一个对象,对象里面的render属性即是编译好的渲染函数,最后将渲染函数设置到$options上。🚀
options.render = render // 最后将渲染函数设置到$options上
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
}
}
return mount.call(this, el, hydrating) // 创建的Vue实例vm,调用原先原型上的 $mount 方法挂载,this指的是vm🚀
}
/**
* Get outerHTML of elements, taking care
* of SVG elements in IE as well.
*/
function getOuterHTML (el: Element): string {
if (el.outerHTML) {
return el.outerHTML
} else {
const container = document.createElement('div')
container.appendChild(el.cloneNode(true))
return container.innerHTML
}
}
Vue.compile = compileToFunctions
export default Vue