关于一些Vue的文章。(6)

时间:2023-02-02 14:48:11

原文链接我的blog,欢迎STAR。

在上篇里,我们已经分析了在 main.js 可以通过el属性设置挂载点,又可以通过手动设置 vm.$mount()。在这篇,我们深入底层,了解原理。

老规矩,我们先分享一篇文章 Vue.js 源码学习笔记

这篇文章里反复提到了compile, 额….(什么鬼?手动摊手。)

Vue,官网文档, 原来Vue模板编译成render函数的过程叫做 compile


现在入正题:

_init, 文件里,有一条重要的线索:

关于一些Vue的文章。(6)

_init 的最后,会运行 initRender 方法,在这个方法中,如果el属性存在,既是运行vm.$mount(vm.$options.el),挂载一个未挂载的实例。如果不存在,既是已经通过vm.$mount()手动地挂载一个未挂载的实例。

接下来,我们找到 vm.$mount() 方法,

源码上分析:

  // 如果options.render 存在,直接运行mount方法
  // 如果不存在时
  if (!options.render) {
    let template = options.template

    // 如果template模板存在,获取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不存在,且el存在
      // 则获取template的outHTML作为模板
      template = getOuterHTML(el)
    }

    // 如果template模板存在,则调用compileToFunctions, 转化为render
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)

从这段源码里,我们也能够很直观的得到以前的一个结论,Vue 2.0中的模板有三种引用写法:el, template, render。其中的优先级是 render > template > el

当完成 compileToFunctions() 将模板转化为 render 以后,会开始 mount 方法。

mount方法里,

    vm._watcher = new Watcher(vm, updateComponent, noop)
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }

转了一圈,其实又回到了从render函数,返回 vnode 的部分,这里我们在第三篇已经详解,不再重复。


完。