Vue3函数式组件复用Slot VNode：输入框光标跳转问题排查

在Vue3的实现场景中，封装的文本输入框存在光标位置异常问题：将文本光标置于输入内容中间后，输入时光标会因组件重渲染跳转到内容末尾。

通过给input标签绑定固定key可以修复该问题：

<input :key="1"/>

该方案会触发createElementBlock()，最终生成的VNode会带有key:1, patchFlag:0的属性，从而避免重渲染导致的光标跳转。

但直接给VNode赋值key的方式并未生效，相关实现代码如下：

<script setup>
import { ref, withDirectives, vModelText} from 'vue'

const msg = ref('Hello world...');

const wrapper = (props, {slots}) => {
  const out = slots.default();
  out.forEach(vnode => (vnode.key = 1) && Object.assign(vnode.props ??= {}, {
    'onUpdate:modelValue': text => props['onUpdate:modelValue'](text)
  }));
  return out.map(vnode => withDirectives(vnode, [[vModelText, props.modelValue]]));
};
</script>

<template>
  <h1>{{ msg }}</h1>
  <wrapper v-model="msg">
    <input/>
  </wrapper>
</template>

内容的提问来源于stack exchange，提问作者Alexander Nenashev