动态组件<component>不断重新onMounted

[Niefee]

<component :is="returnText(val)" ></component>

const renderFn = (data: AnyType) => defineComponent(data);
const returnText = () => {
    onMounted(() => {});
    console.log('returnText:');
    return renderFn({
        name: 'returnText',
        render() {
            return h('span', { style: { color: 'var(--color-success)' } }, '已完成');
        },
    });
};

const name = ref("aom")

一个外部的变量name，重新赋值，会导致returnText 函数里的onMounted重新执行，正常不依赖，应该不影响的，但是赋值就是会重新执行。

[liulinboyi]

原因

将上述例子的描述放到playgrpund中代码如下:
组件A:

<script setup>
import { defineComponent, onMounted, ref, h } from "vue"
const renderFn = (data) => defineComponent(data);
const returnText = () => {
  debugger
  console.log('returnText:');
  return renderFn({
    setup() {
      onMounted(() => {
        console.warn(`returnText onMounted`)
      });
    },
    name: 'returnText',
    render() {
      debugger
      return h('span', { style: { color: 'var(--color-success)' } }, '已完成');
    },
  });
};

const flag = ref(false)
</script>

<template>
  <div>
    <component :is="returnText()"></component>
    <br />
    <button @click="flag = !flag">change</button>
    <div>{{ flag }}</div>
  </div>
</template>

其中模板<component :is="returnText(val)" ></component>这部分会编译为：

_createBlock(_resolveDynamicComponent($setup.returnText()))

在点击change按钮修改flag时，会重新执行组件A的render函数生成vnode和block tree，执行path根据对比映射到DOM。在执行redenr函数时因为动态组件的组件或者vnode是运行时执行函数获得（$setup.returnText()），所以path过程中会认为每一次的组件都是不同的，在对比到动态组件部分会先将原来的动态组件先卸载，然后再用执行函数（$setup.returnText()）新生成的组件去挂载，所以会出现每次修改组件A中的响应值后，returnText生成的组件中的onMounted会执行。

推荐用法

<script setup>
import { ref, defineComponent, onMounted, h } from 'vue'

const renderFn = (data) => defineComponent(data);
const returnText = () => {
    console.warn('create returnText component');
    return renderFn({
        name: 'returnText',
        setup() {
            onMounted(() => { 
                console.warn(`returnText onMounted`)
            });
        },
        render() {
            return h('span', { style: { color: 'var(--color-success)' } }, flag.value ? '已完成' : '未完成');
        },
    });
};

const flag = ref(false)
const returnTextComp = returnText()
</script>

<template>
    <component :is="returnTextComp" />
    <br />
    <button @click="flag = !flag">change</button>
    <div>{{ flag }}</div>
</template>

如果想要动态修改returnText 组件的值，可以用响应值来实现。

引用

playground1 上述例子的描述放到playgrpund
playground2 推荐用法

[Niefee]

谢谢，明白了