The v-text Directive

Consider a component like the following.

<script setup>
import { ref } from "vue";
const message = ref("Hello, v-text!");
</script>

<template>
  <p v-text="message" />
</template>

Compilation Result and Overview

The compilation result is as follows.

const _sfc_main = {
  vapor: true,
  __name: "App",
  setup(__props, { expose: __expose }) {
    __expose();

    const message = ref("Hello, v-text!");

    const __returned__ = { message, ref };
    Object.defineProperty(__returned__, "__isScriptSetup", {
      enumerable: false,
      value: true,
    });
    return __returned__;
  },
};

import {
  renderEffect as _renderEffect,
  setText as _setText,
  template as _template,
} from "vue/vapor";

const t0 = _template("<p></p>");

function _sfc_render(_ctx) {
  const n0 = t0();
  _renderEffect(() => _setText(n0, _ctx.message));
  return n0;
}

Elements specified with v-text are constructed using renderEffect and setText.

Reading the Compiler

We will follow the path transformElement -> buildProps -> transformProps -> directiveTransform -> transformVText.

It's very simple, so I'll include the entire text.

vuejs/core-vapor/packages/compiler-vapor/src/transforms/vText.tsLines 1 to 32 in 30583b9ee1

1import { DOMErrorCodes, createDOMCompilerError } from '@vue/compiler-dom'
2import { IRNodeTypes } from '../ir'
3import { EMPTY_EXPRESSION } from './utils'
4import type { DirectiveTransform } from '../transform'
5import { getLiteralExpressionValue } from '../utils'
6
7export const transformVText: DirectiveTransform = (dir, node, context) => {
8  let { exp, loc } = dir
9  if (!exp) {
10    context.options.onError(
11      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc),
12    )
13    exp = EMPTY_EXPRESSION
14  }
15  if (node.children.length) {
16    context.options.onError(
17      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_WITH_CHILDREN, loc),
18    )
19    context.childrenTemplate.length = 0
20  }
21
22  const literal = getLiteralExpressionValue(exp)
23  if (literal != null) {
24    context.childrenTemplate = [String(literal)]
25  } else {
26    context.registerEffect([exp], {
27      type: IRNodeTypes.SET_TEXT,
28      element: context.reference(),
29      values: [exp],
30    })
31  }
32}

It simply registers registerEffect.
It performs similar processing to when transformText is called.

There's nothing particularly to read in the runtime, so this concludes it for now. Let's keep