vue3 使用h进行动态渲染会损失性能吗

起因

实现动态搭建form表单，需要从dsl中组建元素渲染，我们要知道究竟动态函数究竟在patch时候差异多少

js 复制代码

// 最小demo
<component :is="renderFunc"></component>
const renderFunc = () => {
  return h('div', {innerHTML: props.a})
}

源码分析

首先我们先建立两个最小demo，通过perfomance和debug断点手段去分析

js 复制代码

app.vue

<template>
  <div>
    <button @click="handleChange"></button>
    <component :is="HelloWorld" :a="a"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
const a = ref('1')
const handleChange = () => {
  a.value = Math.random().toString()
}

情况1， h函数

js 复制代码

HelloWorld.vue

<template>
 <component :is="renderFunc"></component>
</template>

<script setup>
import { h } from 'vue';
/* eslint-disable */
const props = defineProps({
  a: String
})

const renderFunc = () => {
  return h('div', {innerHTML: props.a})
}
</script>

情况2，组件

js 复制代码

HelloWorld.vue

<template>
<ITest :a="props.a"></ITest>
</template>

<script setup>
import Itest from './ITest.vue'
/* eslint-disable */
const props = defineProps({
  a: String
})
</script>

js 复制代码

ITest.vue

<template>
    <div>{{props.a}}</div>
</template>
<script setup>
/* eslint-disable */
 // eslint-disable-next-line 
const props = defineProps({
    a: String
})
</script>

通过点击按钮触发a值变化查看渲染流程区别

情况 1

情况 2

我们可以观察到情况1 在第一次patch的时候renderfunc这个子组件是没有触发到内部的patch，而是通过updateProps再度调用renderfunc进入内部，从而内部patch的。

部分源码路径

这里我们可以观察到renderfunc这个组件的patchflag为0，shapeflag为2(patch时这两个key启到判断作用)，进入processComponent =》 updateComponent，因为新的component为空所以直接赋值旧的就结束了。第一次的patch就这样结束。又由于h里面使用props会触发收集所以在updateprops的时候就会调用renderfunc这个函数，从而触发patch。

总结

通过源码的debug和perfomance的记录我们可以得出使用动态渲染这个写法确实会造成一些性能上的损耗，多次多层的不断触发渲染以及patch会更加明显的看出来。

参考

vue3 源码

vue3 使用h进行动态渲染会损失性能吗

起因

源码分析

情况1， h函数

情况2， 组件

总结

参考

情况2，组件