Detaillierte Erklärung des Vue3-Sandbox-Mechanismus

<div>{{test}}</div>
<div>{{Math.floor(1)}}</div>

_Vue = Vue;

Rückgabefunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
  mit (_ctx) {
    Konstante {
      toDisplayString: _toDisplayString,
      VNode erstellen: _createVNode,
      Fragment: _Fragment,
      offenerBlock: _openBlock,
      Block erstellen: _createBlock,
    } = _Vue;

    zurückkehren (
      _openBlock(),
      _Block erstellen(
        _Fragment,
        null,
        [
          _createVNode("div", null, _toDisplayString(test), 1 /* TEXT */),
          _createVNode(
            "div",
            null,
            _toDisplayString(Math.floor(1)),
            1 /* TEXT */
          ),
        ],
        64 /* STABILES_FRAGMENT */
      )
    );
  }
};

const GLOBALS_WHITE_LISTED =
  "Unendlich, undefiniert, NaN, ist endlich, ist NaN, parseFloat, parseInt, decodeURI," +
  "URI-Komponente dekodieren,URI kodieren,URI-Komponente kodieren,Mathematik,Zahl,Datum,Array," +
  "Objekt, Boolescher Wert, Zeichenfolge, Regulärer Ausdruck, Karte, Satz, JSON, Intl, BigInt";

const isGloballyWhitelisted = (Schlüssel) => {
  gibt GLOBALS_WHITE_LISTED.split(",").includes(Schlüssel); zurück
};

const hasOwn = (Objekt, Schlüssel) => {
  gibt Object.prototype.hasOwnProperty.call(Objekt, Schlüssel) zurück;
};

const Herkunft = {};
const _ctx = neuer Proxy (Ursprung, {
  get(Ziel, Schlüssel, Empfänger) {
    wenn (hasOwn(Ziel, Schlüssel)) {
      Reflect.get(Ziel, Schlüssel, Empfänger);
    } anders {
      konsole.warnen(
        `Auf die Eigenschaft ${JSON.stringify(key)} wurde während des Renderns zugegriffen ` +
          `ist aber in der Instanz nicht definiert.`
      );
    }
  },
  hat(Ziel, Schlüssel) {
    // Wenn es ein globales Objekt ist, gib „false“ zurück, löse kein „Get Interception“ aus und suche nach Variablen aus dem vorherigen Bereich. // Wenn es kein globales Objekt ist, gib „true“ zurück und löse „Get Interception“ aus. return !isGloballyWhitelisted(key);
  },
});

<div>{{test}}</div>
<div>{{Math.floor(1)}}</div>

importieren {
  toDisplayString als _toDisplayString,
  createVNode als _createVNode,
  Fragment als _Fragment,
  openBlock als _openBlock,
  Block erstellen als _createBlock,
} von "vue";

Exportfunktion rendern(_ctx, _cache, $props, $setup, $data, $options) {
  zurückkehren (
    _openBlock(),
    _Block erstellen(
      _Fragment,
      null,
      [
        _createVNode("div", null, _toDisplayString(_ctx.a), 1 /* TEXT */),
        _createVNode(
          "div",
          null,
          _toDisplayString(Math.floor(1)),
          1 /* TEXT */
        ),
      ],
      64 /* STABILES_FRAGMENT */
    )
  );
}

const GLOBALS_WHITE_LISTED =
  "Unendlich, undefiniert, NaN, ist endlich, ist NaN, parseFloat, parseInt, decodeURI," +
  "URI-Komponente dekodieren,URI kodieren,URI-Komponente kodieren,Mathematik,Zahl,Datum,Array," +
  "Objekt, Boolescher Wert, Zeichenfolge, Regulärer Ausdruck, Karte, Satz, JSON, Intl, BigInt";

const isGloballyWhitelisted = (Schlüssel) => {
  gibt GLOBALS_WHITE_LISTED.split(",").includes(Schlüssel); zurück
};
const isLiteralWhitelisted = (Schlüssel)=>{
  returniere 'true, false, null, this'.split(',').includes(Schlüssel)
}
Exportfunktion processExpression(
  Knoten
) {
  const rewriteIdentifier = (roh) => {
    gibt `_ctx.${raw}` zurück
  }
  const rawExp = node.inhalt
  wenn (istSimpleIdentifier(rawExp)) {
    const isAllowedGlobal = isGloballyWhitelisted(rawExp)
    const isLiteral = isLiteralWhitelisted(rawExp)
    wenn (!istAllowedGlobal && !istLiteral) {
      node.content = rewriteIdentifier(Rohdatenausdruck)
    }
    Rückgabeknoten
  }