Shallow light Vue source code -2-vue.js execution note

This is the third day of my participation in the First Challenge 2022.

The background,

This part I thought for a long time, feel or want to add this part, this part is required, considering that not everyone like me this kind of fishing experts, have time to study the source code, just speak of the source code you will receive, here in js an execution order first, first put this code execution order le le, behind it’s easy to understand, This part belongs to knife-sharpener.

Test.html

In the previous section, there was a test.html file at the end of the preparation – note the order of its script tags:

<script src="./dist/vue.js"></script>
<script>
  debugger
  const sub = {
    template: ` 
       
        {{ someKey + foo }}
       
`.props: {
      someKey: {
        type: String.default: 'hhhhhhh'}},inject: ['foo']};new Vue({
    el: '#app'.data: {
      msg: 'hello vue'
    },
  hahaha: 'hahahahahha'.provide: {
      foo: 'bar'
  },
  components: {
      someCom: sub
  }
  })
</script>
Copy the code

2.1 Load and execute vue.js

SRC is a js file. It doesn’t matter when the browser detects that the resource is JS, it executes it. Note that it is executed, not executed it is a piece of text, only executed is a variable, function…

Dist /vue.js:

(function (global, factory) {
  typeof exports= = ='object' && typeof module! = ='undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory()); } (this, (function () { 'use strict';

  var emptyObject = Object.freeze({});

  // These helpers produce better VM code in JS engines due to their
  // explicitness and function inlining.
  function isUndef (v) {
    return v === undefined || v === null
  }
  
  / /...
  function Vue (options) {
    if (
      !(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
   }

  initMixin(Vue);
  stateMixin(Vue);
  / /...
  
  Vue.compile = compileToFunctions;

  return Vue;
})));
Copy the code

2.2 Registration of the variable Vue

As you can see from the above vue.js code structure, the first is a self-executing function (IIFE), which defines two parameters: Global and factory, and then the self-executing and function takes two arguments, the first is this, and the other is a function, so obviously global corresponds to this, and factory corresponds to this anonymous function;

Exports and define (” define “) are exports and DEFINE (” define “) are exports and DEFINE (” define “) are exports and DEFINE (” define “) are exports and DEFINE (” define “) are exports and DEFINE

(global = global || self, global.Vue = factory());
Copy the code

Global.vue = factory(), so who is global? This is the window object in the global scope. Factory is the anonymous function below.

 (function () { 'use strict';

  var emptyObject = Object.freeze({});
  / /...
  function Vue (options) {
    if (
      !(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
   }
 / /...
  return Vue;
}))
Copy the code

So the execution of global.vue = factory() is equivalent to window.vue = funciton Vue() {}; This registers the Vue in the global scope as a window object property.

Details about initGlobalAPI() in the factory function

When the factory function is executed from top to bottom, in addition to registering the Vue class, some global configuration of the Vue is done, part of which is done in the initGlobalAPI method.

This part is also the beauty of Vue’s object-oriented design, not the architectural design, but the first impression, these global configuration is to reuse, we are familiar with Vue global components (keep-alive, global directives, global filters are initialized here.

When creating a component, subclass Vue, subclass Vue, subclass Vue, subclass Vue, subclass Vue

// Vue Factory function fragment
function initGlobalAPI (Vue) {
   // details of initGlobalAPI
}

initGlobalAPI(Vue);
Copy the code

3.1 the Vue. The options

There is a VUe. options initialized in initGlobalAPI. This options is the global Vue Options, which contains the global Components, directives, filters, Options: Ctor. Options: Vue. Options: Ctor.

// Vue Factory function fragment
function initGlobalAPI (Vue) {
    // ASSET_TYPES = [
    // 'component',
    // 'directive',
    // 'filter'
    // ];

    // builtInComponents = {
    // KeepAlive: KeepAlive
    // };

    Vue.options = Object.create(null);
    ASSET_TYPES.forEach(function (type) {
      Vue.options[type + 's'] = Object.create(null);
    });

    extend(Vue.options.components, builtInComponents);
   
    Vue.options._base = Vue; 
}

initGlobalAPI(Vue);
Copy the code

Vue. Options initialization should look like this:

Vue.options = {
  components: {
    keepAlive: keepAlive,
  },
  directives: {},
  filters: {},
  _base: Vue
}
Copy the code

Ctor.options._base means Vue.

3.2 Partial global method registration

// Vue Factory function fragment
function initGlobalAPI (Vue) {

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

    // 2.6 explicit observable API
    Vue.observable = function (obj) {
      observe(obj);
      return obj
    };

    // Vue.options ....

    initUse(Vue); // Register the vue. use method
    initMixin$1(Vue); // Register the vue.mixin method
    initExtend(Vue); // Register the vue.extend method
    initAssetRegisters(Vue); // Register the vue.component/vue.directive/vue.filter method
}

initGlobalAPI(Vue);
Copy the code

Options (Ctor. Options or vm. Constructive. options, you’ll notice I’ve reminded you several times that this is really important), Vue.component (register global component)/vue. directive (register global directive)/vue. filter (global filter) methods are available

Four,

Here are some things to watch out for and things to keep in mind

4.1 You still haven’t started to read the source code

We are still looking at vue.js as a rollup output, note that this is not source code. Why say this, because this vue. Js only a copy, the code from top to bottom execution is in line with expectations, and the source is ESModule, a variety of import/export, a lot of content is not a module, which adds a lot of trouble to the source code reading.

Vue. Options will be used soon. When you create a new Vue(options), there will be various mergeOptions. Who merged with whom? Because you don’t know what options are.

Also, keep in mind that when our code: new Vue() is executed, everything in Vue.js will have been executed before we have the Vue class.

4.2 comb

test.htmlIn thevue.js 的 scriptThe tag comes before our demo code, make sure it loads and executes first;
In our demo,Vuethroughwindow.VueThe way to mount in global scope;
There’s one in the factory functioninitGlobalAPIWill the initializationVue.optionsAnd some global methods;