Heim > Artikel > Web-Frontend > Beispielanalyse einer Vue-Quellcode-Eintragsdatei
In diesem Artikel wird hauptsächlich die Analyse von Vue-Quellcode-Eintragsdateien vorgestellt (empfohlen). Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Ich habe schon seit einiger Zeit Angularjs und dann Reactjs verwendet, aber damals hatte ich nie Zeit, meine Gedanken zum Betrachten des Quellcodes aufzuzeichnen Ich möchte dieses hart erkämpfte Denken nicht verschwenden. Ich möchte durchhalten! !
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 wird mithilfe des Rollup-Tools aus vielen Modulen zusammengeführt, was in package.json zu sehen 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 },
Wir haben die Startdatei „web/entry-runtime-with-compiler.js“ gefunden, dann nach dem Vue-Objekt gesucht und es schließlich in „instance/index“ gefunden .js":
// 这是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, als wäre hier alles vorbei, denn unser Ziel ist es, die Startposition zu finden, aber ich habe eine Frage, warum braucht Vue so viele Schichten?
entry-runtime-with-compiler.js -> runtime/index.js -> core/index.js -> instance/index.js
Als ich mir den Quellcode genau ansah, wurde mir plötzlich klar, schauen wir uns zunächst an, was diese Dateien bewirken:
(1) Instanz/index.js
Einige Hinweise lassen sich aus der Benennung des Vue-Moduls, Instanz (Instanz) erkennen.
Diese Datei ist der Anfang des Vue-Objekts und gleichzeitig die 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 nur instanziiert und aufgerufen werden.
(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, sie ist sehr einfach und klar --- „Globale Schnittstelle initialisieren“,
Kommen wir zur initGlobalAPI-Methode
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) }
, bei der es sich grundsätzlich um statische Methoden handelt, 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) Entry-Runtime-with-compiler.js
Mach einfach eine Sache Die Sache besteht darin, $mount neu zu schreiben
const mount = Vue.prototype.$mount Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { ... return mount.call(this, el, hydrating) }
je nach Betriebsumgebung An diesem Punkt haben wir die Datei gefunden, die ausgeführt werden soll, wozu jede Datei dient, wie sie konkret ausgeführt wird und was beim nächsten Mal darüber geschrieben wurde. Aber wir sollten uns am Anfang nicht zu sehr um jedes Detail kümmern und nicht jede Codezeile verstehen müssen. Wenn das der Fall ist, wird es wirklich ermüdend sein und wir haben möglicherweise nicht den Mut, durchzuhalten.
Verwandte Empfehlungen:
Detaillierte Erläuterung der Webpack-Dateiseitenverpackung mit mehreren Einträgen
Das obige ist der detaillierte Inhalt vonBeispielanalyse einer Vue-Quellcode-Eintragsdatei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!