いくつかのVueについての文章.(6)

原文は私のblogをリンクして、STARを歓迎します.
前編ではmainで分析しました.jsは、el属性によってマウントポイントを設定することもできるし、vm.$mount()を手動で設定することもできる.この編では、底に深く入り込んで、原理を理解します.
古いルール、私たちはまず文章を共有します.jsソース学習ノート.
この文章にはcompileと繰り返し言及されています.ええと.△何の鬼だ.
Vue、公式サイトのドキュメントを調べると、Vueテンプレートがrender関数にコンパイルされるプロセスをcompileと言います.
本題に入ります.
で、Init、ファイルには、重要な手がかりがあります._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という3つの引用方法があります.優先度はrender > template > elです.compileToFunctions()を完了してテンプレートをrenderに変換すると、mountメソッドが開始されます.mountの方法では、

    vm._watcher = new Watcher(vm, updateComponent, noop)

    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }

一周して、実はまたrender関数からvnodeの部分に戻って、ここでは3編目で詳しく説明して、もう繰り返しません.
終わります.