javascript - 输入上的渲染功能消除了 Vue 中的 react 性

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 }
    });
  }
};

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

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

---

示例屏幕截图:

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

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

Answer 1

不要在渲染函数中使用 attrs，而应使用 domProps。

As soon as the content of the input is edited, the attribute's value is still updated in the DOM (you can check your console) but that attribute is no longer relevant to what is being displayed

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

---

渲染函数应该看起来像这样:

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