没有缓存的 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

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

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

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

你可以看到它直播here on codesandbox.io