입력에 대한 렌더 기능 Vue에서 반응성 제거

입력에 대한 렌더 기능 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에서 예를 볼 수 있다.

---

스크린샷 예:

위에 언급된 두 가지 구성요소의 예를 만들어 보았다.둘 다 동일한 데이터 값을 사용하고 있으며 이 값은1100ms마다

입력 후NormalInput, 그것은 즉시 에 의해 덮어쓰여진다.:value="val"데이터. 그러나 입력 시RenderFunctionInput증분을 멈추고 데이터에서 분리되어 비활성 상태가 된다.

사용하는 대신attrs렌더 함수에domProps.

입력 내용이 편집되는 즉시 속성의 값이 DOM에서 계속 업데이트되지만(콘솔을 확인할 수 있음) 해당 속성은 표시되는 것과 더 이상 관련이 없다.

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

참조URL: https://stackoverflow.com/questions/53149991/render-function-on-input-removes-reactivity-in-vue