深く入るjsソースコードから(3)

データ駆動
Vue.jsの核心思想はデータ駆動である.データ駆動とは、ビューがデータ駆動によって生成されることを意味し、我々はビューの修正に対して、DOMを直接操作するのではなく、データを修正することによって行う.これは,jQueryなどのフロントエンドライブラリを用いてDOMを直接修正するなど,従来のフロントエンド開発に比べてコード量を大幅に簡素化している.特にインタラクションが複雑な場合、データの修正だけに関心を持つと、コードの論理が非常に明確になります.DOMがデータのマッピングになったため、私たちのすべての論理はデータの修正であり、DOMに触れなくても、このようなコードはメンテナンスに非常に便利です.Vueでjsでは、簡潔なテンプレート構文を使用して、データをDOMにレンダリングすることを宣言できます.

  {
     { message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

最終的にはページにHello Vueがレンダリングされます.次に、ソースコードの観点からVueがどのように実現されているかを分析し、分析プロセスは主線コードを主とし、重要な分岐論理は後で単独で分析されます.データ駆動には、データ更新駆動ビューの変化もあります.この章では、テンプレートとデータが最終的なDOMにどのようにレンダリングされるかを明らかにすることを目標としています.
new Vueで何があったの?
エントリコードから分析を開始し、new Vueの背後でどのようなことが起こったのかを分析します.newキーワードはJavascript言語でインスタンス化を表すオブジェクトであり、Vueは実際にはクラスであり、クラスはJavascriptでFunctionで実現されていることはよく知られています.ソースコードを見てみましょう.src/core/instance/indexです.jsで.

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

Vueはnewキーでのみ初期化でき、this._が呼び出されます.initメソッド、src/core/instance/init.jsで定義

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    startTag = `vue-perf-start:${vm._uid}`
    endTag = `vue-perf-end:${vm._uid}`
    mark(startTag)
  }

  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
    // optimize internal component instantiation
    // since dynamic options merging is pretty slow, and none of the
    // internal component options needs special treatment.
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    initProxy(vm)
  } else {
    vm._renderProxy = vm
  }
  // expose real self
  vm._self = vm
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')

  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    vm._name = formatComponentName(vm, false)
    mark(endTag)
    measure(`vue ${vm._name} init`, startTag, endTag)
  }

  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

Vue初期化は主にいくつかのことをして、構成を統合して、ライフサイクルを初期化して、イベントセンターを初期化して、レンダリングを初期化して、data、props、computed、watcherなどを初期化します
tips:vueソースのデバッグテクニックについて
Webpackのvueエンジニアリングには、以下のプロファイルWebpackがある.base.conf.js

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

実際のvueソースコードは、node_modulesの中のvue工事の下の経路vue/dist/vue.esm.js.デバッグするコードをdebuggerに挿入してブレークポイント
Vueインスタンスマウントの実装
Vueでは、src/platform/web/entry-runtime-with-compilerのような複数のファイルに定義されている$mountインスタンスメソッドによってvmをマウントします.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js.$mountという方法の実現はプラットフォーム、構築方式に関連しているからだ.次にcompilerバージョンの$monut実装を重点的に分析します.webpackのvue-loaderを捨てて、純粋なフロントエンドブラウザ環境でVueの動作原理を分析し、原理の理解を深めるのに役立ちます.
まずsrc/platform/web/entry-runtime-with-compilerを見てみましょう.jsファイルで定義:

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

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to  or  - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  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) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

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

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

このコードはまずプロトタイプ上の$mountメソッドをキャッシュし,このメソッドを再定義し,まずこのコードを解析する.まず、elに制限があり、Vueはbody、htmlのようなルートノードにマウントできません.次は重要な論理です.renderメソッドが定義されていない場合は、elまたはtemplate文字列をrenderメソッドに変換します.ここでは、Vue 2.0バージョンでは、単一ファイルを使用しても、すべてのVueのコンポーネントのレンダリングにはrenderメソッドが必要であることを覚えておいてください.vue方式でコンポーネントを開発するか、elまたはtemplate属性を書いたかで、最終的にrenderメソッドに変換されます.では、このプロシージャはVueの「オンラインコンパイル」プロセスであり、compileToFunctionsメソッドを呼び出して実装されます.コンパイルプロセスは後で紹介します.最後に、元のプロトタイプの$mountメソッドを呼び出してマウントします.
元のプロトタイプの$mountメソッドはsrc/platform/web/runtime/index.jsで定義されているのは、runtime onlyバージョンのVueで直接使用できるため、このように設計されているのは完全に多重化のためです.

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

$mountメソッドは、src/core/instance/lifecycleで定義するmountComponentメソッドを実際に呼び出す.jsファイル:

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

上のコードから分かるように、mountComponentコアはvm.を先に呼び出すことです.renderメソッド氏は仮想ノードになり、レンダリングWatcherをインスタンス化し、そのコールバック関数でupdateComponentメソッドが呼び出され、最終的にvm.updateはDOMを更新します.Watcherはここで2つの役割を果たしています.1つは初期化時にコールバック関数を実行することであり、もう1つはvmインスタンスのモニタリングデータが変化したときにコールバック関数を実行することです.このブロックは後述します.関数がルートノードと判断したときにvmを設定します.isMountedはtrueで、このインスタンスがマウントされていることを示し、mountedフック関数を実行します.ここで注意vm.$vnodeはVueインスタンスの親仮想ノードを表し、Nullは現在ルートVueのインスタンスを表します.