Detaillierte Einführung in Quellcode-Eingabedateien in Vue (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Analyse von Vue-Quellcode-Eintragsdateien vor (empfohlen). Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Ich habe schon seit einiger Zeit Angularjs und später Reactjs verwendet, aber damals hatte ich keine Zeit, meine Gedanken zum Betrachten des Quellcodes aufzuzeichnen Verschwenden Sie dieses hart erkämpfte Denken nicht mehr. !

Ich persönlich bin sehr glücklich, wenn ich den Quellcode lese. Jedes Mal, wenn ich den vorherigen Absatz lese, frage ich mich, ob es Ihnen genauso geht wie mir.

Der Vue-Quellcode ist eine Kombination aus vielen Modulen, die das Rollup-Tool verwenden, das aus package.json ersichtlich ist. Laden wir nun das Vue-Projekt von Github herunter und beginnen wir noch heute mit dem „Denken“.

Die Quellcode-Version, die ich heruntergeladen habe, ist: „Version“: „2.5.7“,

Die Startposition des Quellcodes ist hier zu sehen

"dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev"

// 从build/config.js 中找到 TARGET: web-full-dev 这是运行和编译（支持现在的浏览器，由于里面大量应用了ES6-7）后的

 // Runtime+compiler development build (Browser)
 'web-full-dev': {
  entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development',
  alias: { he: './entity-decoder' },
  banner
 },

Die Die Startdatei wurde gefunden „web/entry-runtime-with-compiler.js“, dann haben wir die ganze Zeit nach dem Vue-Objekt gesucht und es schließlich in „instance/index.js“ gefunden:

// 这是Vue 的开始位置
function Vue (options) {
 // 判断如果是不是生产环境，且不是通过new关键字来创建对象的话，就在控制台打印一个warning
 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)
}

Es scheint Dass es hier drüben ist, weil wir Der Zweck besteht darin, die Startposition zu finden, aber ich habe eine Frage: Warum braucht Vue so viele Ebenen?

entry-runtime-with-compiler.js
->
runtime/index.js
->
core/index.js
->
instance/index.js

Als ich mir den Quellcode genau ansah, dämmerte es plötzlich Schauen wir uns zunächst an, was diese Dateien bewirkt haben:

(1) Instanz/index.js

Einige Hinweise sind aus dem Vue-Modul ersichtlich Benennung, Instanz (Instanz).

Diese Datei ist der Anfang des Vue-Objekts und außerdem eine zentralisierte Datei der Methoden der Vue-Prototypkette (Prototyp).

// _init
initMixin(Vue)
// $set、$delete、$watch
stateMixin(Vue)
// $on、$once、$off、$emit
eventsMixin(Vue)
// _update、$forceUpdate、$destroy
lifecycleMixin(Vue)
// $nextTick、_render、以及多个内部调用的方法
renderMixin(Vue)

Diese Methoden können erst aufgerufen werden, nachdem sie instanziiert wurden.

(2) core/index.js

Diese Datei wird nach der Erstellung und Vorverarbeitung von Instance/index.js erneut verarbeitet. Was hat er also hauptsächlich gemacht? Wir berücksichtigen nicht die laufende Umgebung

initGlobalAPI(Vue)

Ja, wir rufen diese Methode einfach auf: „Globale Schnittstelle initialisieren“,

Lassen Sie uns in die initGlobalAPI-Methode einsteigen

export function initGlobalAPI (Vue: GlobalAPI) {
 // config
 const configDef = {}
 configDef.get = () => config
 // 在 非生产环境，如何修改了配置文件config里面的内容会提示警告
 if (process.env.NODE_ENV !== 'production') {
  configDef.set = () => {
   warn(
    'Do not replace the Vue.config object, set inpidual fields instead.'
   )
  }
 }
 // 定义config 属性， 监听变化
 Object.defineProperty(Vue, 'config', configDef)

 // exposed util methods.
 // NOTE: these are not considered part of the public API - avoid relying on
 // them unless you are aware of the risk.
 Vue.util = {
  warn,
  extend,
  mergeOptions,
  defineReactive
 }

 Vue.set = set
 Vue.delete = del
 Vue.nextTick = nextTick

 Vue.options = Object.create(null)
 // 给vue 创建 ASSET_TYPES 的 空对象
 ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
 })

 // this is used to identify the "base" constructor to extend all plain-object
 // components with in Weex's multi-instance scenarios.
 Vue.options._base = Vue

 extend(Vue.options.components, builtInComponents)
 // Vue.use
 initUse(Vue)
 // Vue.mixin
 initMixin(Vue)
 // Vue.extend
 initExtend(Vue)
 // Vue.component, Vue.directive, Vue.filter
 initAssetRegisters(Vue)
}

Dies sind grundsätzlich statische Methoden, die in der Form von Vue xxx aufgerufen werden.

(3) runtime/index.js

Hier sind einige Erweiterungen und __patch__ und $mount (Montageelemente) zu Vue.prototype hinzugefügt.

// Vue.options.directives（model和show）和 Vue.options.components（Transition和TransitionGroup)
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

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

(4) enter-runtime-with-compiler.js

Das Einzige, was wir getan haben, war, $mount neu zu schreiben, um $mount entsprechend unterschiedlichen Betriebsbedingungen zu schreiben Umgebungen. Schreiben Sie verschiedene $mount

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 ...
 return mount.call(this, el, hydrating)
}

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So konfigurieren Sie die Babel-Konfigurationsdatei in vue-cli

So verwenden Sie das Babel-Installations- und Konfigurations-Tutorial

Verwenden Sie GM-Cropping, um Bilder unter Nodejs zu synthetisieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Quellcode-Eingabedateien in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!