Introduction détaillée aux fichiers d'entrée de code source dans vue (tutoriel détaillé)

Cet article présente principalement l'analyse des fichiers d'entrée du code source de vue (recommandé). Maintenant, je le partage avec vous et le donne comme référence.

Je développe des projets Vue depuis un certain temps. J'ai utilisé Angularjs avant et plus tard, Reactjs. Mais à cette époque, je n'ai jamais eu le temps d'enregistrer mes réflexions sur la lecture du code source. pour gaspiller 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
 },

Le début a été trouvé. Le fichier est "web/entry-runtime-with-compiler.js", puis nous avons cherché jusqu'au bout 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)
}

Il semble que nous ayons terminé ici, car notre but est de trouver la position de départ, mais j'ai une question, pourquoi Vue a-t-elle besoin d'autant de couches

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

Quand j'ai regardé ? En examinant attentivement le code source, cela m'est soudain venu à l'esprit. Jetons d'abord un coup d'œil à ce que font ces fichiers. >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 également un fichier centralisé des méthodes de chaîne de prototypes (prototype) Vue

Ces méthodes ne peuvent être appelées qu'après avoir été instanciées .

(2) core/index.js

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

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 prenons pas en compte l'environnement d'exécution

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

Entrons dans l'initGlobalAPI. méthode

initGlobalAPI(Vue)

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

(3) runtime/index.js

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

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

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

La seule chose qu'il fait est de réécrire $mount, Vue dépend de différents environnements d'exécution , réécrivez différents $mount

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

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

Comment configurer le fichier de configuration Babel dans vue-cli

Comment utiliser le tutoriel d'installation et de configuration de Babel

Utiliser le recadrage gm pour synthétiser des images sous Nodejs

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!