캐시가 없는 VueJs 계산 속성

캐시가 없는 VueJs 계산 속성

입력 필드인 컴포넌트가 있습니다.이 필드는 3개의 케이스를 받아들여 내부 상태(번호)로 변환합니다.

• 입력: 없음(빈 문자열);상태: 정의되지 않음; 클래스: is-empty; 값: 빈 문자열
• 입력: 임의의 양수; 상태: 양수; 클래스:; 값: 양수
• 입력: ; 상태: -1, 클래스: is-unknown, 값:
• 그렇지 않은 경우:상태: -2; 클래스: is-invalid; 값: 빈 문자열

이 컴포넌트는output내부 상태를 변경하는 세터와 내부 상태를 기준으로 비활성화된 경우 숫자, 대시 또는 빈 문자열 중 하나를 반환하는 getter가 포함된 계산된 속성입니다.필드를 비워두고 싶은 비활성 입력에 대한 특수한 경우입니다.

첫 번째 비활성 문자의 경우 정상적으로 동작하지만 다음 문자는 필드에 표시됩니다.내부 상태가 계속 켜져 있기 때문에 값이 캐시된 것으로 추측됩니다.invalid캐시가 사용됩니다.

<template>
  <input v-model="output" v-bind:class="state"/>
</template>

<script>
export default {
  name: 'TsResult',
  props: ['result'],
  data: function() {
    return {
      res: this.result
    }
  },
  computed: {
    state: function() {
      // ..
      if (this.res === -2) {
        return 'is-invalid'
      } else if (this.res === -1) {
        return 'is-unknown'
      }
      // ...
    },
    'output': {
      set: function(newVal) {
        //.. 
        if (isInvalid(newVal)) {
           this.res = -2;
        } else if (isUnknwon(newVal)) {
           this.res = -1;
        }
        // ...
      },
      get: function() {
        if (this.res === -2 ) { // Invalid
          return ''
        } else if (this.res === -1) { // Unknown
          return '-'
        } 
        // ...
      }
    }
</script>

검증을 수행하려면 설정기가 필요하므로 계산된 getter 대신 메서드를 사용하는 것은 해당되지 않습니다.

또한 비활성 상태에서는 입력 값이 변경되고(빈 문자열을 설정함으로써) 빈 문자열을 받아들이는 워처가 다시 트리거되므로 워처를 사용하는 것은 좋은 방법이 아닙니다.따라서 비활성 상태는 표시되지 않습니다.

이 계산된 속성에 대한 캐싱을 비활성화할 수 있습니까? 아니면 더 나은 대안이 있습니까?

가능한 해킹은 비활성 상태의 내부 상태를 감소시켜 내부 상태가 변화하고 값이 재계산되도록 하는 것입니다.하지만 나는 더 나은 해결책을 갖고 싶다.

패스 acache속성 설정false는 계산 속성에 대한 캐시를 비활성화해야 합니다.자세한 내용은 문제 #1189 - 계산 속성 캐싱을 옵션화 및 관련 커밋을 참조하십시오.

실제 키 입력을 수신하는 보이지 않는 입력 필드를 덮어 계산한 속성을 아래 표시된 항목으로 출력할 수 있습니까?

분할하는 것은 어떨까요?v-model에v-bind그리고.v-on:input대략적으로 (테스트를 위해 누락된 기능을 추가):

<template>
  <input v-bind:value="output_computed()" v-on:input="on_input($event.target.value)" v-bind:class="state"/>
</template>

<script>
function isValid(val) {
  return parseInt(val) != NaN && parseInt(val) >= 0;
}

function isInvalid(val) {
  return parseInt(val) == NaN || parseInt(val) < 0;
}

function isUnknown(val) {
  return !(isValid(val) || isInvalid(val));
}

export default {
  name: "TsResult",
  props: ["result"],
  data() {
    return {
      res: this.result,
      v: ""
    };
  },
  methods: {
    output_computed() {
      if (this.res === -2) {
        // Invalid
        return "";
      } else if (this.res === -1) {
        // Unknown
        return "-";
      } else if (this.res === -3) {
        return "";
      } else if (this.res === 0) {
        return this.v;
      }
    },
    on_input(newVal) {
      if (isInvalid(newVal)) {
        this.res = -2;
      } else if (isUnknown(newVal)) {
        this.res = -1;
      } else if (newVal === "") {
        this.res = -3;
      } else if (isValid(newVal)) {
        this.res = 0;
        this.v = newVal;
      }
      this.$emit("input", this.output_computed());
    }
  }
};
</script>

codesandbox.io에서 라이브로 보실 수 있습니다.

언급URL : https://stackoverflow.com/questions/49873998/vuejs-computed-property-without-caching