Interpretation der Vue-Quellcode-Architektur (detailliert)

Der Inhalt dieses Artikels befasst sich mit der Interpretation der Vue-Quellcode-Architektur (ausführlich). Ich hoffe, dass er für Freunde in Not hilfreich ist.

Herunterladen

Von Github herunterladenVue

npm install 
npm run dev

Führen Sie es aus

Rollup + Flow

vue verwendet Rollup-Paketierung, Flow-Standarddatentyp

Rollup kann zuerst mit Webpack angewendet werden, es liest sich fast gleich, die Zeit ist begrenzt Immerhin nur 5 Minuten, dafür müssen Sie das Rollup-Dokument nicht lesen

Eintritt

Paket.json öffnen
Schauen wir uns die Skripte an Konfiguration

 "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
  "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",

Scripts/config.js finden
Öffnen

Je nach Konfiguration von TARGET werden unterschiedliche Konfigurationen ausgewählt

Gleichzeitig wird process.env. Die NODE_ENV-Umgebung wird hier konfiguriert

TARGET verfügt über CommonJS, ES Modules, UMD über js eingeführte Typen
und weex, ssr

'web-runtime-cjs-dev': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.common.dev.js'),
    format: 'cjs',
    env: 'development',
    banner
  }

den Alias-Pfad unter alias.js festlegen
Lassen Sie uns vorstellen src/platforms zuerst

Es gibt separate Web- und Weex-Eingänge für Web und Weex

Unter der Webdatei befinden sich CommonJS, ES-Module, UMD für den js-Einführungstyp und der Server-Paketeingang

Web/entry-runtime öffnen ist keine Installationserinnerung, um Devtools zu installieren

Geben Sie mir diese Eingabeaufforderung für die Entwicklungsumgebung

import Vue from './runtime/index'

export default Vue

Der Plattformverzeichnisordner wurde erklärt

Kernverzeichnis

Öffnen Sie den Kern /instance/index

Was angezeigt wird, ist

import Vue from 'core/index'

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

Das erste, was ausgeführt werden muss, ist initMixin(Vue)

Open init

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

lifecycle

Wenn Sie den Lebenszyklus

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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

callHook öffnen, wird der entsprechende Zyklus ausgeführt. Die vom Entwickler in der Zyklusfunktion geschriebenen

Events

initEvents implementieren emit on und andere Methoden. Bitte beziehen Sie sich auf das Listener-Subscriber-Modell, das hier nicht im Detail erläutert wird >$nextTick wird sofort aufgerufen, nachdem der Dom aktualisiert wurde

nextTick(fn, this) ist eine selbstausführende Funktion

_render gibt die JS-Daten des Knotens zurück. Es ist kein Dom

das hat Vdom

initRender-Funktion

zu vm hinzugefügt. Die Methoden _c und $createElement werden zum Rendern

state

export function initMixin (Vue) {
  Vue.prototype._init = function (options?: Object) {
    const vm = 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
    // 处理传入的options
    // 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 {
       // 传入的options,默认的options一起合并挂载到vm.$options上
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      // 代理
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // 生命周期
    initLifecycle(vm)
     // emit on 事件
    initEvents(vm)
    // 处理render vdom
    initRender(vm)
    callHook(vm, 'beforeCreate')
    // 处理Injections
    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)
    }
    // 渲染到dom
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

verwendet Als Proxy für das Vue-Attribut fungieren Sie können den Wert von this.data.a erhalten, indem Sie auf this.a zugreifen

export function callHook (vm: Component, hook: string) {
  // disable dep collection when invoking lifecycle hooks
  pushTarget()
  //执行对象的周期函数，周期函数最后被处理成数组
  const handlers = vm.$options[hook]
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()

Daten überwachen

stateMixin-Funktion

Prototyp hinzufügen Objekt

if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }

Andere

src/compiler wurde kompiliert

core /comonetd sorgt für Keep-Alive

core/util kapselt die gemeinsame Methode

Kern-/Vdom-Vdom-Algorithmus

Die obige Gesamtarchitekturanalyse ist abgeschlossen

Anhangsbild

Das obige ist der detaillierte Inhalt vonInterpretation der Vue-Quellcode-Architektur (detailliert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!