Source code analysis of vue (internal definition and configuration)

Keywords: Javascript Vue encoding

SSR_ATTR

var SSR_ATTR = 'data-server-rendered';

Here is the definition of vue SSR. Rendering on the server, which is available on line 6446. I saw a single article for him.

ASSET_TYPES

var ASSET_TYPES = [
    'component',
    'directive',
    'filter'
];

The list of asset types that a component can own. Here are several filters, customization, and component definition. You can anchor them later

LIFECYCLE_HOOKS

var LIFECYCLE_HOOKS = [
    'beforeCreate',
    'created',
    'beforeMount',
    'mounted',
    'beforeUpdate',
    'updated',
    'beforeDestroy',
    'destroyed',
    'activated',
    'deactivated',
    'errorCaptured',
    'serverPrefetch'
];

Life cycle hooks... Still have an anchor

config

var config = ({
    optionMergeStrategies: Object.create(null),
    //Warning or not
    silent: false,
     //Show production mode prompt message at startup
    productionTip: "development" !== 'production',
    //Whether devtools is enabled
    devtools: "development" !== 'production',
    //Record performance or not
    performance: false,
    //Error handler for monitoring program errors
    errorHandler: null,
    //Warning handler for monitor warnings
    warnHandler: null,
    //Ignore some custom elements
    ignoredElements: [],
    //v-on is a user-defined keyword 
    keyCodes: Object.create(null),

    //Check that the tag is retained so that it cannot be registered as a component.  
    isReservedTag: no,
    //Check that the property is preserved so that it cannot be used as a component property.
    isReservedAttr: no,
    //Check if the tag is an unknown element.
    isUnknownElement: no,
    //Get the namespace of the element
    getTagNamespace: noop,
    //Resolving the actual tag name for a specific platform
    parsePlatformTagName: identity,
    //Check whether a property must be bound with a property (for example, value)
    mustUseProp: no,
    //Perform updates asynchronously. For Vue test Utils, if set to false, this will significantly reduce performance
    async: true,
    //Exposure due to legacy causes
    _lifecycleHooks: LIFECYCLE_HOOKS
  });

Unicode regular expression

var unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;

Unicode letters for parsing HTML tags, component names, and property paths

isReserved

function isReserved (str) {
  var c = (str + '').charCodeAt(0);
  return c === 0x24 || c === 0x5F
}

Check if the beginning of the string is $or ASCII
The charCodeAt() method returns the Unicode encoding of the character at the specified location. The return value is an integer between 0 - 65535.

Decimal system Hexadecimal character
36 0x24 $
95 0x5F _

def

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
  }

Define properties, where!! casts boolean

parsePath

  var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]"));
  function parsePath (path) {
    if (bailRE.test(path)) {
      return
    }
    var segments = path.split('.');
    return function (obj) {
      for (var i = 0; i < segments.length; i++) {
        if (!obj) { return }
        obj = obj[segments[i]];
      }
      return obj
    }
  }

Resolve simple paths.

First, a rule is defined. Where the source property returns a string containing the source text of the regexp object, and it does not contain two forward slashes and any flags on either side.
The test() method checks if the string matches bailRE
segments split s path into an array of strings. What is a loop (obj)?

To be continued (continuous update)

Posted by thisisnuts123 on Sun, 08 Dec 2019 20:39:46 -0800