在Vue.js中,如何禁用计算属性的缓存？

Question

在0.12.8之前,计算属性的行为与getter类似 - 每次访问它时,都会重新评估getter函数.在0.12.8中,这已经得到了改进 - 只有在必要时才会缓存计算属性并且懒惰地重新评估.

对于我当前的项目,我实际上需要在每次访问时重新评估一些属性.当前懒惰评估不起作用的原因是因为在我的一些属性中还有其他"动态变量"不在Vue.js的监视下.

Answer 1

根据文档,您可以简单地将缓存设置为false:

computed: {
  example: {
    cache: false,
    get: function () {
      return Date.now() + this.msg
    }
  }
}

Answer 2

您可以使用来自@Xethron 的方式，但使用函数的简短语法：

computed: {
  example: {
    cache: false,
    get () {
      return Date.now() + this.msg
    }
  }
}

Answer 3

根据官方文档，虽然@Xethron和@\xd0\x98\xd0\xbb\xd1\x8c\xd1\x8f\xd0\x97\xd0\xb5\xd0\xbb\xd0\xb5\xd0\的早期答案xbd\xd1\x8c\xd0\xba\xd0\xbe 在 Vue 1.x 之前都是正确的，从那时起它们已被弃用，转而支持基于方法的方法。

\n

所以上面的例子将会改变：

\n

computed: {\n  example: {\n    cache: false,\n    get () {\n      return Date.now() + this.msg\n    }\n  }\n}\n

\n

...对此：

\n

methods: {\n  getExample () {\n    return Date.now() + this.msg\n  }\n}\n

\n

请注意，我们现在将通过调用 函数 来访问模板中的值，因此：

\n

<p>message: {{ example }}</p>

\n

...需要是这样的：

\n

<p>message: {{ getExample() }}</p>

\n