vue.js - 没有缓存的 VueJs 计算属性

Question

我有一个组件，它是一个输入字段，它接受三种情况并将它们转换为内部状态(数字):

• 输入:无(空字符串)；状态:未定义；类:是空的；值:空字符串
• 输入:任何正数；状态:正数；类:；值:正数
• 输入:-；状态:-1；类:未知；值:-
• 否则:状态:-2；类:无效；值:空字符串

此组件有一个 output 计算属性，其中有一个更改内部状态的 setter 和一个根据内部状态在无效时返回数字、破折号或空字符串的 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 是不适用的，因为我需要 setter 来执行验证。

并且使用观察者不是一个好主意，因为无效状态会更改输入值(通过设置空字符串)并重新触发接受空字符串的观察者。因此永远不会显示无效状态。

我可以禁用此计算属性的缓存还是有更好的选择？

一种可能的破解方法是针对无效状态递减我的内部状态，以便内部状态发生变化并重新计算值。但我想有一个更好的解决方案。

Answer 1

传递设置为 false 的 cache 属性应该禁用计算属性的缓存。详情见issue #1189 - Make computed property caching optional和 relevant commit .

也许你可以覆盖一个不可见的输入字段来接收实际的按键并将计算的属性输出到较低的显示字段？

在 v-bind 和 v-on:input 中拆分 v-model 怎么样，大致(添加缺少的函数来测试它):

<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>

直播可以看到here on codesandbox.io