Analyse d'un exemple de fichier d'entrée de code source Vue

Cet article présente principalement l'analyse des fichiers d'entrée du code source de Vue (recommandé). L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Je développe des projets Vue depuis un certain temps. J'utilisais Angularjs avant, puis Reactjs. Mais à cette époque, je n'avais jamais eu le temps d'enregistrer mes réflexions sur la lecture du code source. Je ne veux pas gâcher cette réflexion durement gagnée, je veux persister ! !

Personnellement, je me sens très heureux lorsque je lis le code source. Chaque fois que je lis le paragraphe précédent, je me sens beaucoup plus épanoui. Je me demande si vous êtes comme moi.

Le code source de Vue est une combinaison de nombreux modules utilisant l'outil de cumul, visible à partir de package.json. Maintenant, téléchargeons le projet vue depuis github et commençons notre « réflexion » aujourd'hui.

La version du code source que j'ai téléchargée est : "version": "2.5.7",

La position de départ du code source peut être vue d'ici

"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
 },

Nous avons trouvé le fichier de démarrage qui est "web/entry-runtime-with-compiler.js", puis nous avons recherché l'objet Vue et l'avons finalement trouvé dans "instance/ index.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)
}

On dirait que tout est fini ici, car notre objectif est de trouver la position de départ, mais j'ai une question, pourquoi Vue avez-vous besoin d'autant de couches ?

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

Quand j'ai regardé attentivement le code source, j'ai soudain réalisé, jetons d'abord un coup d'œil à ce que font ces fichiers :

(1) instance/index.js

Certains indices peuvent être vus à partir du nom du module Vue, instance (instance).

Ce fichier est le début de l'objet Vue, et c'est aussi le fichier centralisé des méthodes de la chaîne de prototypes (prototype) Vue

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

Ces méthodes peuvent uniquement être instanciées et appelées.

(2) core/index.js

Ce fichier est à nouveau traité après la création et le traitement préliminaire d'Instance/index.js. Alors, que faisait-il principalement ? Nous ne considérons pas l'environnement d'exécution

initGlobalAPI(Vue)

Oui, nous appelons simplement cette méthode, c'est très simple et clair --- "Initialiser l'interface globale",

Entrons dans la méthode initGlobalAPI

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

qui sont essentiellement des méthodes statiques, c'est-à-dire : appelées sous la forme de Vue xxx.

(3) runtime/index.js

Voici quelques extensions et __patch__ et $mount (éléments de montage) ajoutés à Vue.prototype .

// 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

Faites juste une chose la chose est de réécrire $mount. Vue réécrit différents $mount

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

selon différents environnements d'exploitation. À ce stade, nous avons trouvé le fichier à commencer à exécuter, quelle est l'utilité de chaque fichier, comment le faire spécifiquement et ce qui a été fait, j'en parlerai la prochaine fois. Mais nous ne devrions pas trop nous soucier de chaque détail au début, et ne pas avoir à comprendre chaque ligne de code. Si tel est le cas, ce sera vraiment fatigant et nous n’aurons peut-être pas le courage de persister.

Recommandations associées :

Explication détaillée de l'empaquetage des pages de fichiers à entrées multiples Webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!