Version

3.0.7

Reproduction link

https://codesandbox.io/s/use-ref-in-render-gnojw?file=/src/main.js

Steps to reproduce

I cannot set ref in render function,

What is expected?

The value of ref object should be set

What is actually happening?

The value of ref object is not set

What if the ref object is created outside of the setup funciton?

The stuff you return from setup is not part of $props, it becomes part of this.

For further support please use the discord community at chat.vuejs.org

Binding the `this.elRef, I got the same result.

import { defineComponent, onMounted, ref, toRaw, h, createApp } from "vue";

const Test = defineComponent({
  name: "test",
  setup() {
    const elRef = ref("test");
    // should log out the div html element
    // but I got 'test'
    onMounted(() => console.log('>>', elRef.value));
    return { elRef };
  },
  render() {
    return h("div", { ref: this.elRef }, "ok");
  }
});

createApp(Test).mount("#app");

return h("div", { ref: 'elRef' }, "ok");

It works, thanks, I didn't find it in the Render function doc.

By the way, I found if I watch a reactive object which has a ref to DOM element with deep: true option, the traverse function will search all properties of the DOM element, and because of something like parentNode, vue will traverse up to the window object. Therefore, the web page cannot response any event.

use markRaw with ref cannot avoid the loop.

It will be nice if the watch function ignore all the DOM elements

https://v3.vuejs.org/api/special-attributes.html#ref

Expects: string | Function

By the way, I found if I watch a reactive object which has a ref to DOM element with deep: true option, the traverse function will search all properties of the DOM element, and because of something like parentNode, vue will traverse up to the window object. Therefore, the web page cannot response any event.

Please open an issue. Thanks.,