vue3 module creates runtime-dom source code analysis

Preface

runtime-domIt is aimed at the browser's runtime, including DOM operations,props(For exampleclass, events, styles and othersattributes) updates and other contents; we will open this sectionruntime-domChapter.

Create modules

existpackages/runtime-dom/Create a directory file in the directory:

│  │  └─ src
│  │     ├─ 
│  │     ├─ modules
│  │     │  ├─   // Update method of attributes│  │     │  ├─  // class update│  │     │  ├─  // Updates of event binding│  │     │  └─  // Update of style attribute│  │     ├─   // dom operation method│  │     └─     // Property update operation

createruntime-dom/document:

{
  "name": "@vue/runtime-dom",
  "version": "1.0.0",
  "main": "",
  "module": "dist/",
  "unpkg": "dist/",
  "buildOptions": {
    "name": "VueRuntimeDOM",
    "formats": [
      "esm-bundler",
      "cjs",
      "global"
    ]
  }
}

nodeOptions

First create some methods to operate DOM, such as adding, deleting, modifying and checking elements and text:

// runtime-dom/src/
export const nodeOps = {
  // 1. Create elements  createElement(tagName) {
    return (tagName);
  },
  // Create text node  createText(text) {
    return (text);
  },
  // 2. Insert element  insert(child, parent, anchor) {
    // Elements move;    // When the second parameter is null, insert to the end;    (child, anchor || null);
  },
  // 3. Remove elements  remove(child) {
    const parent = ;
    if (parent) {
      (child);
    }
  },
  // 4. Query elements  querySelector(selector) {
    return (selector);
  },
  parentNode(node) {
    return ;
  },
  nextSibling(node) {
    return ;
  },
  // 5. Set text content  setElementText(el, text) {
     = text;
  },
  setText(node, text) {
     = text;
  },
};

patchProps

patchProp

Let’s implement some update methods for properties:

// runtime-dom/src/
import { patchAttr } from "./modules/attr";
import { patchClass } from "./modules/class";
import { patchEvent } from "./modules/event";
import { patchStyle } from "./modules/style";
export const patchProp = (el, key, prevValue, nextValue) =&amp;gt; {
  if (key === "class") {
    // 1. class class name    patchClass(el, nextValue);
  } else if (key === "style") {
    // 2. Style    patchStyle(el, prevValue, nextValue);
  } else if (/^on[^a-z]/.test(key)) {
    // 3. onXxx event    patchEvent(el, key, nextValue);
  } else {
    // 4. Other attributes attributes    patchAttr(el, key, nextValue);
  }
};

we willpropsIt is divided into four types:class、style、onXxxEvents, and otherattributesAttributes; use four methods to deal with these fourprop。

patchClass

renewclassproperty:

valueWhen empty, use("class")Removeclassproperty;
Otherwise set the element'sclassNameproperty.

// runtime-dom/src/modules/
export const patchClass = (el, value) => {
  if (value == null) {
    ("class");
  } else {
     = value;
  }
};

patchStyle

renewstyleproperty:

styleWhen there is no new value, remove itstyleproperty;styleUpdates only when there is a new value;
Add new style tostyleOn, if oldstyleIf there are duplicates in it, the old style will be directly overwritten
For the old onestyleThere are new onesstyleStyles that are not available in it need to be removed

// runtime-dom/src/modules/
export const patchStyle = (el, prev, next) =&gt; {
  if (next) {
    const style = ;
    // 1. Add new style to style, if there is duplicate direct override    for (let key in next) {
      style[key] = next[key];
    }
    for (let key in prev) {
      // 2. The old ones have, the new ones don’t, they need to be removed      if (next[key] == null) {
        style[key] = null;
      }
    }
  } else {
    ("style");
  }
};

patchEvent

Update event (event isonXxxform bound):

Through a callerinvokerTo store the callback function (store to) and execute callbacks (execute()）
You need to cache old events and cache them toel._veiOn the attribute (the cached isinvoker）
Case 1: If there is a new event callback function, andel._veiThe cache of this event exists inUpdate events; Update directlyJust
Case 2: If a new event callback function exists but does not exist in the cache, thenBind new events; Create firstinvokerand willinvokerCache toel._veiand then pass()Binding events
Case 3: If no new event callback function exists, it isRemove Events, use directly()Remove the event.

// runtime-dom/src/modules/
function createInvoker(initialValue) {
  const invoker = (e) =&gt; (e);
  // Bind the event's callback to . When the event callback is updated in the subsequent update, just update it   = initialValue;
  return invoker;
}
export const patchEvent = (el, key, nextValue) =&gt; {
  const invokers = el._vei || (el._vei = {}); // _vei is the abbreviation of vue event invoker  const name = (2).toLowerCase(); // Get the event name  const existingInvoker = invokers[name]; // Get cache  // 1. If it is a callback for update event  if (nextValue &amp;&amp; existingInvoker) {
    // Events are stored on, update this property     = nextValue;
  } else {
    // 2. If it is a new event    if (nextValue) {
      // 2.1 Create an invoker (the callback function of the event) and cache it (essentially cache it on el._vei)      const invoker = (invokers[name] = createInvoker(nextValue));
      // 2.2 Binding Event      (name, invoker);
    } else {
      // 3. If it is a removal event      // 3.1 Unbinding event      (name, existingInvoker);
      // 3.2 Clear cache      invokers[name] = null;
    }
  }
};

patchAttr

Update otherattributes：

use()Remove attributes;
use()Add and update properties

// runtime-dom/src/modules/
export const patchAttr = (el, key, value) => {
  if (value == null) {
    (key);
  } else {
    (key, value);
  }
};

Summarize

We have introduced this section roughlyruntime-dommodule, implements some DOM operations andpropsUpdate method; in the next section, we will introduceruntime-coreModule-related content.

The above is the detailed content of the runtime-dom source code analysis of the vue3 module creation. For more information about the creation of the vue3 runtime-dom module, please pay attention to my other related articles!