A component is mounted using render(), and when the parent component's value changes, the child component does not change.

[Jinzm]

使用函数渲染的方式挂载组件，父组件的值变化后，子组件没有相应变化。

A component is mounted using render(), and when the parent component's value changes, the child component does not change.

https://sfc.vuejs.org/#eNp9U72S0zAQfpUdNfYNjp20IckMAzcDDVBBgSgcWzkryJJGkh2YjDsKSmregfaa43FgruQVWElJnLtjrvBY+/et9ttPe/JM67zvGJmTha0M1w4sc51eUclbrYyDPRi2yaDJ8C9rZvy/rBzvGQywMaqFBOuTU/5LJoR6r4yoY5SSvBh9vhclVAJUSloHjn12sPQtUkpmlFzcDb1Zb0M0Nkz3PgpQzn3Mn4eQ7z/BHPSvVc0wv0nHhhkcilqMiXel6FioRuS8jBBPjxg4+SvpmOlLkaYXy9Wh0qfn6Os89pnxBJIZzo0Q2Ww6neJVxsuHq7zA8ZdQq6prmXR5hXM4dimYt9Kk5n0Srn9KWKv6S15qjTw/b7io0yNKSIv0R192aoChRRE3hztDw7FWC+yDFsACmwCvl0mZBDvOuSjQHezbb9e3N19/31z//fVjv/ezDYMHPIGQjMS9TtpS51urJCol8EIPAUvJ/MgxJWG9czw0zmk7Lwq7qfzOtzZX5qrAU2466XjLcmbbydqonWUGgSnJzjAKdPbMTOLMzDyGeS/1AW7YEJUDjnJXh17zD9haRYoA/vz8fkbNqB5P0EjhGVWB/XtvKIpBG6WtVwLbcMneeitK+UyTSTijnLykj4Ws5f51xLpLNGz6gZJO19hvPhZT8tGLmMqiANdwCzsuBOyU+USlh8Cn9Z+aDJINN9ilakp5xZIIcRITGf4BDrNz2A==

[Jinzm]

update link
https://sfc.vuejs.org/#eNp9U72S0zAQfpUdNfYNjp20IckMAzcDDVBBgSgcWzk7yJJGkh2YjDsKSmregfaa43FgruQVWEmJ7btjrvBY+/et9ttPR/JMqbRrGVmSlSl0rSwYZlu1oaJulNQWjqDZLoEqwb8omXb/vLB1x6CHnZYNRFgfDfkvGefyvdS8DFFK0mz0uV6UUAFQSGEsWPbZwtq1iClZUHJxN/Rmu/fR0DA+uihAvnQxd+59vvs4s9C9liXD/CoeGyZwKmowxt/lvGW+GpHTPEA8PWPg5K+EZbrLeRxfrDenSpeeoq912BPjCUQLnBshksV8PserjJf3V3mB46+hlEXbMGHTAuew7JIzZ8VRWXeRv/6QsJXllzRXCnl+XtW8jM8oPi3QH3zJ0ABDqyxsDneGhmWN4tgHLYAVNoG6XEd55O0w5ypDt7dvv13f3nz9fXP999eP43Hgpe992mSV3czzt6ZkJI9kiLHKhoYkIUEDsyZX6d5IgaryHNJTwFCyPO+DEi+FJR4qa5VZZpnZFU4fe5NKfZXhKdWtsHXDUmaa2VbLg2EagSlJJhgZOjumZ4Efph/DvJf6ANdvk4oeR7mrWfc+HjC7CXQC/Pn5fULjqLQTjye6J1T5Td17b0E4SktlnGrYrhbsrbOC7Cf6jfwZpefkfy5kTe1eUqi7RMPEHyhpVYn9lmMxJR+d4KnIMrBVbeBQcw4HqT9R4SDwGf6nJoFoV2vsUlS5uGJRgBiER/p/K4KCrQ==

[liulinboyi]

The children component is not update is because when use the textObj.a, it is a string not a ref.

The textObj.a is a string because when get value will return the res.value As the following source code shows.

core/packages/reactivity/src/baseHandlers.ts

Lines 143 to 146 in 588bd44

	if (isRef(res)) {
	// ref unwrapping - skip unwrap for Array + integer key.
	return targetIsArray && isIntegerKey(key) ? res : res.value
	}

You can use like this:

playground

App.vue

<script setup>
import { ref, h, render as r, reactive, watch } from 'vue'
import HelloWorld from "./HelloWorld.vue"
  const text = ref("1")
  const textObj = reactive({
    a:text
  })
  
  console.warn(textObj.a, typeof textObj.a)
  
  let vNode = h(HelloWorld, {
    modelValue: text
  });
  
  setInterval(()=>{
    text.value = text.value + '1'
  },1000)

  const vNodeDom = document.createElement('div')
  document.body.appendChild(vNodeDom)
  r(vNode, vNodeDom)
</script>

<template>
  <div id='a'>
    
  </div>
  父组件：{{textObj.a}}
  <HelloWorld v-model="textObj.a"/>
</template>

[Jinzm]

在您的示例代码里面，h()创建的对象的modelvalue是text，但是在我的使用场景中，modelvalue是textObj.b。因为我的需求是需要使用h()函数创建多个组件，对应的modelvalue分别为textObj.a textObj.b textObj.c。是类似这样的结构：
<HelloWorld v-model="textObj.a"/><HelloWorld v-model="textObj.b"/><HelloWorld v-model="textObj.c"/>

[Jinzm]

感谢。刚才的那种方式可以实现我的需求。但是对于创建节点的方式，这种方式不会更新。那么还有什么更好的创建节点的方式呢。
const vNodeDom = document.createElement('div') document.body.appendChild(vNodeDom)

[liulinboyi]

在您的示例代码里面，h()创建的对象的modelvalue是text，但是在我的使用场景中，modelvalue是textObj.b。因为我的需求是需要使用h()函数创建多个组件，对应的modelvalue分别为textObj.a textObj.b textObj.c。是类似这样的结构： <HelloWorld v-model="textObj.a"/><HelloWorld v-model="textObj.b"/><HelloWorld v-model="textObj.c"/>

Your child component use like this:

<script setup>
const props = defineProps(['modelValue'])

const emit = defineEmits(['update:modelValue'])

function change() {
  emit('update:modelValue', props.modelValue + 1)
}
</script>

<template>
  <div>
    {{ modelValue }}
    <button @click="change">
      Click
    </button>
  </div>
</template>

can use like this:

<HelloWorld v-model="textObj.a"/>
<HelloWorld v-model="textObj.b"/>
<HelloWorld v-model="textObj.c"/>

<script setup>
import { ref, reactive } from 'vue'
import HelloWorld from './Comp.vue'

const textObj = reactive({
  a: 'a',
  b: 1,
  c: 'c'
})
</script>

<template>
  <HelloWorld v-model="textObj.a"/>
  <HelloWorld v-model="textObj.b"/>
  <HelloWorld v-model="textObj.c"/>
</template>

playground

[Jinzm]

我的子组件需要以dom节点的方式动态渲染在页面上，标签化的挂载组件方式不符合我的需求。

[liulinboyi]

感谢。刚才的那种方式可以实现我的需求。但是对于创建节点的方式，这种方式不会更新。那么还有什么更好的创建节点的方式呢。 const vNodeDom = document.createElement('div') document.body.appendChild(vNodeDom)

If dont't use Reactivity value:

update dom may use

  watchEffect(() => {
    let vNode = h(HelloWorld, {
    	modelValue: textObj.a,
      "onUpdate:modelValue": (val) => textObj.a = val
  	});
  	render(vNode, vNodeDom)
  })

or watch to update the dom, But not recommended!!!

or can have a try to use teleport https://vuejs.org/guide/built-ins/teleport.html#basic-usage

@Jinzm

element-plus playground