vue中模板编译compiler源码详解

最新推荐文章于 2025-06-17 11:07:02 发布

小蛮牧码者

最新推荐文章于 2025-06-17 11:07:02 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue compiler 源码

本文链接：https://blog.csdn.net/qq_35385241/article/details/117256468

vue编译模板过程;

<div>
    <h1>这是compiler</h1>  
	<p v-if="message">{
  
  { message }}</p>
	<p v-else>No messageq.</p>
</div>

编译成render函数如下：

function anonymous(
) {
  with(this){return _c('div',[_c('h1',[_v("这是compiler")]),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No messageq.")])])}
}

vue compiler入口：

// platforms/web/entry-runtime-with-compiler.js

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  // ...
  const options = this.$options
  // 如果是render则走render  若是template、el则需要编程render
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {