输入的渲染功能消除了Vue中的反应性

Question

我正在尝试创建一个渲染函数，以在Vue中渲染input字段。

我可以在普通的vue文件中使用如下模板轻松完成此操作：

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

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

请注意，以上确实可以正常工作。

但是，当尝试使用以下代码将上述代码转换为渲染函数时：

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

乍看起来似乎是被动的，但是在手动编辑RenderFunctionInput之后，它不再是被动的。 Vue数据似乎正在更新，但输入的实际值没有更新。

您可以在https://codesandbox.io/embed/oooq7o2q16?module=%2Fsrc%2FApp.vue

查看示例

---

示例屏幕截图：

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

输入NormalInput后，它立即被:value="val"数据覆盖。但是，在输入RenderFunctionInput时，它停止递增，并与数据分离，并且变得无效。

Answer 1

您应该使用attrs。而不是在渲染功能中使用domProps。

  

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

https://github.com/vuejs/vue/issues/9027#issuecomment-435797509

---

render函数应该看起来像这样：

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