Re-evaluation of props defaults when using render functions and on prop update triggered from parent

[nestarz]

Version

3.0.0-beta.2

Reproduction link

https://codesandbox.io/s/amazing-platform-m9ri1?file=/index.html

Steps to reproduce

I did setup a setInterval that update a reactive value that is sent as a prop to a child. I also added a way to see if the props are re-evaluated so it adds a text log in the DOM. This way you can see the behaviour directly.

What is expected?

Each prop update doesn't trigger a re-evaluation of the default functions.

What is actually happening?

A prop update trigger a re-evaluation of the default functions.

---

I am trying to make something like react-three-fiber. I can't "hoist" values of the defaults, because this mean all boxes that rely on a default value will share the same data.

Oddly, it works well using the template and not the render function.

[pikax]

As far as I know when you return render function from setup, it will re-render every time creating a new component, but you can simulate the render by creating the render blocks your self here

// NOTE HACK

  const App = {
    setup() {
      const position = ref(new THREE.Vector3(-1, 1, 0));
      setInterval(() => {
        position.value = new THREE.Vector3(Math.random(), 1, 0);
      }, 1000);

      return {
        position
      };
    },
    render(_ctx, _cache) {
      return (
        openBlock(),
        createBlock(Box, { position: _ctx.pos }, null, 8 /* PROPS */, [
          "position"
        ])
      );
    }
  };

[yyx990803]

btw, it's better to use shallowRef for Three.js objects to avoid observing them (since you are creating new vectors on each update and not mutating them)