How to use "v-once" directive in JSX?

[funny-family]

🧐 Problem Description

Do not understand how to use "v-once" directive with jsx?

💻 Sample code

...
<div v-once>render once or not....</div>
...

🚑 Other information

When I try apply this directive I get error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'deep')
    at withDirectives (runtime-core.esm-bundler.js?5c40:3019)

[CrownHanhard]

If you want to execute an event . You can try this

<div onClickOnce = { your event }> content </div>

[funny-family]

@CrownHanhard onClickOnce allows me to click on div once, but not render render it only once and no more. Still thanks!

[CrownHanhard]

Maybe like v-if, you can only do it in other ways For example, set a Watcheror initialize deep copy data

[funny-family]

@CrownHanhard, I don't think it works this way because:

this

<div v-once>
  addadada
</div>

compiles into this:

import { setBlockTracking as _setBlockTracking, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _cache[0] || (
    _setBlockTracking(-1),
    _cache[0] = _createElementVNode("div", null, [
      _createTextVNode(" addadada ")
    ]),
    _setBlockTracking(1),
    _cache[0]
  )
}

See here.

[CrownHanhard]

Yes, you are right! I found instructions such as: v-show, v-slots,html , text, model , models, etc. in the code, but I didn't find the instruction v-once. Look at this and this .It's all on line 142

[funny-family]

🤔

[funny-family]

Solution was right above me. Big bruh xD

import { setBlockTracking as _setBlockTracking, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _cache[0] || (
    _setBlockTracking(-1),
    _cache[0] = _createElementVNode("div", null, [
      _createTextVNode(" addadada ")
    ]),
    _setBlockTracking(1),
    _cache[0]
  )
}

[tcastelly]

Maybe it can help someone :)

The first parameter of the withMemo is the trigger. Here because the array is empty it's like a v-once.

import { defineComponent, ExtractPropTypes, withMemo } from 'vue';

const props = {
  msg: String,
} as const;

export default defineComponent({
  name: 'DisplayMsg',
  props,
  render(ctx: ExtractPropTypes<typeof props>, cache: unknown[]) {
    return withMemo([/* ctx.msg */], () => <h1>{ctx.msg}</h1>, cache, 0);
  },
});

I simplified to be able to call like this:
https://github.com/shenron/vite-demo/blob/master/src/components/DisplayMsgOnce.tsx

const setup = (p: Props) => {
  const memo = useMemo();

  const msgMemo = memo(() => [p.msg]);

  const msgOnceMemo = memo();

  return {
    msgMemo,
    msgOnceMemo,
  };
};

export default defineComponent({
  name: 'DisplayMsgOnce',
  props,
  setup,
  render(c: DisplayMsgOnce) {
    const { msgMemo, msgOnceMemo } = c;

    return (
      <ul>
        <li><small>v-once:</small> {msgOnceMemo(<span>{c.msg}</span>)}</li>
        <li><small>v-memo:</small> {msgMemo(<span>{c.msg}</span>)}</li>
      </ul>
    );
  },
});

[funny-family]

Maybe it can help someone :)

The first parameter of the withMemo is the trigger. Here because the array is empty it's like a v-once.

import { defineComponent, ExtractPropTypes, withMemo } from 'vue';

const props = {
  msg: String,
} as const;

export default defineComponent({
  name: 'DisplayMsg',
  props,
  render(ctx: ExtractPropTypes<typeof props>, cache: unknown[]) {
    return withMemo([/* ctx.msg */], () => <h1>{ctx.msg}</h1>, cache, 0);
  },
});

I simplified to be able to call like this: https://github.com/shenron/vite-demo/blob/master/src/components/DisplayMsgOnce.tsx

const setup = (p: Props) => {
  const memo = useMemo();

  const msgMemo = memo(() => [p.msg]);

  const msgOnceMemo = memo();

  return {
    msgMemo,
    msgOnceMemo,
  };
};

export default defineComponent({
  name: 'DisplayMsgOnce',
  props,
  setup,
  render(c: DisplayMsgOnce) {
    const { msgMemo, msgOnceMemo } = c;

    return (
      <ul>
        <li><small>v-once:</small> {msgOnceMemo(<span>{c.msg}</span>)}</li>
        <li><small>v-memo:</small> {msgMemo(<span>{c.msg}</span>)}</li>
      </ul>
    );
  },
});

v-once dose not use withMemo under the hood

[zhiyuanzmj]

Now, @vue-macros/jsx-directive@0.4.0 support v-memo & v-once directive.

// v-memo
<div
  v-for={i in list}
  v-memo={[selected === i]}
  key={i}
  onClick={() => (selected = i)}
>
  {i}: {selected}
</div>

// v-once
<div v-once>{selected}</div>