Javascript 输入上的渲染功能可消除Vue中的反应性

我正在尝试创建一个渲染函数，用于在Vue中渲染

输入

字段

我可以在一个普通的

vue

文件中轻松地使用以下模板执行此操作：

// NormalInput.vue
<template>
  <input :value="value" />
</template>

<script>
export default {
  name: "NormalInput",
  props: {
    value: null
  }
};
</script>

起初它似乎是被动的，但在手动编辑

RenderFunctionInput

后，它就不再是被动的了。Vue数据似乎正在更新，但输入的实际值没有更新

您可以在以下位置查看示例：

---

示例屏幕截图：

我已经创建了上述两个组件的一个示例。它们都使用相同的数据值，每100ms递增

1

在输入

NormalInput

后，它立即被

：value=“val”

数据覆盖。但是当在

RenderFunctionInput

中键入时，它停止递增，并与数据分离，变得不活动

---

在渲染函数中不应使用

attrs

，而应使用

domProps

一旦编辑了输入的内容，属性的值 仍然在DOM中更新（您可以检查控制台），但是 属性与正在显示的内容不再相关

---

渲染函数应改为如下所示：

// RenderFunctionInput.js
export default {
  name: "RenderFunctionInput",
  props: {
    value: null
  },
  render(createElement) {
    return createElement("input", {
      domProps: { value: this.value }
    });
  }
};

// RenderFunctionInput.js
export default {
  name: "RenderFunctionInput",
  props: {
    value: null
  },
  render(createElement) {
    return createElement("input", {
      domProps: { value: this.value }
    });
  }
};