关于mount挂载函数

106 阅读1分钟

关于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