web/entry-runtime-with-compiler学习

内容

• 该文件是web版本的vue的入口文件，其引用了 web/runtime/index 中的Vue，会重写Vue中的 $mount 方法，带有编译器，会将template 编译为render函数，放入options中。

  Vue.compile = compileToFunctions

• template接受两种参数

  • id，会将元素的innerHTML作为模板
  • 元素，会将元素的innerHTML作为模板
• 没有template，则将 mount 方法的 el 元素的 outerHTML 作为模板

涉及到的知识点

• options 中含有四个属性
  • delimiters
  • comments
  • render&staticRenderFns ,为 compileToFunctions 的返回结果

    const { render, staticRenderFns } = compileToFunctions(template, {
       outputSourceRange: process.env.NODE_ENV !== 'production',
       shouldDecodeNewlines,
       shouldDecodeNewlinesForHref,
       delimiters: options.delimiters,
       comments: options.comments
     }, this)
    options.render = render
    options.staticRenderFns = staticRenderFns

web/runtime/index

内容

该文件是为Vue增加一些web平台相关的工具方法，并且挂载了相关的组件和指令。然后定义了Vue的 $mount 方法。

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

• $mount 方法内部使用了 mountComponent 方法去挂载Vue实例。

  相关知识

• 判断是否是浏览器